是否有跨浏览器方法来获取所有元素的所有属性的已使用css值？

Question

我希望获得页面上所有DOM元素的已使用css值.当我说"使用过的值"时,我指的是W3C规范中规定的定义:

6.1.3使用的值

在不格式化文档的情况下尽可能地处理计算值.但是,某些值只能在文档布局时确定.例如,如果元素的宽度设置为其包含块的某个百分比,则在确定包含块的宽度之前不能确定宽度.的使用的值是接受所计算的值,并解决任何剩余的依赖关系成绝对值的结果.

这些应该是相对于实际页面布局计算的最终值.Mozilla的文档声称可以window.getComputedStyle用来获取使用的值,但这对我来说没有意义,因为计算值与使用的值不同(我想要使用的值).即使这些是使用过的值,我也不确定这是否仅适用于Firefox.有没有办法在所有浏览器中可靠地获取使用过的值？

Answer 1

注意：自从问题被提出并得到回答以来，世界已经发生了变化。现在比以前有更多的值层：声明的、级联的、指定的、计算的、解析的、使用的和实际的。getComputedStyle返回解析值（根据属性计算或使用）。以下是各层：

来自CSS 级联和继承级别 4：

一旦用户代理解析了文档并构建了文档树，它就必须为树中的每个元素以及相应的格式化结构中的每个框分配适用于目标媒体类型的每个属性的值。

给定元素或框的 CSS 属性的最终值是多步计算的结果：

1. 首先，针对每个元素的每个属性，收集应用于元素的所有声明值。可能有零个或多个应用于元素的声明值。
2. 级联产生级联值。每个元素的每个属性最多有一个级联值。
3. 默认产生指定值。每个元素的每个属性都只有一个指定值。
4. 解决值依赖性产生计算值。每个元素的每个属性都有一个计算值。
5. 格式化文档会产生使用的值。如果给定属性适用于该元素，则该元素仅具有该属性的使用值。
6. 最后，根据显示环境的约束将使用值转换为实际值。与使用值一样，元素上的给定属性可能有也可能没有实际值。

然后，CSS 对象模型定义解析值：

getComputedStyle()历史上被定义为返回元素或伪元素的“计算值”。然而，“计算值”的概念在 CSS 修订版之间发生了变化，而实现getComputedStyle()必须保持不变以与已部署的脚本兼容。为了解决这个问题，本规范引入了解析值的概念。

给定普通属性的解析值可以确定如下：

...后面是属性列表（特定属性和类别），说明解析值是计算值还是使用值。

在这样的背景下：

getComputedStyle适用于所有主要的现代浏览器。早期版本的 IE 提供了近乎等效的currentStyle.

getComputedStyle返回已解析的值，对于任何给定的属性，该值要么是计算值，要么是使用值，CSSOM 规范明确定义了在哪种情况下以哪种值返回哪些属性。我没有在CSSC&I4或CSSOM中看到任何定义在解析值不是使用值的情况下访问使用值的方法，也没有看到任何访问实际值的方法，gsnedders表示他们已经与工作组核实并确认目前还没有办法获取使用过的值，至少目前还没有。

解析值可能足以满足您的需要。例如，下面的示例显示207.5px或 类似，而不是50%。这是解析值，也是这种特殊情况下使用的值（因为我在不是或 的width元素上使用），但可能不是实际值，具体取决于子像素渲染在这种情况下是否可行且合适。displaynonecontents

(function() {
  var target = document.getElementById("target");
  var style = window.getComputedStyle(target);
  display("computed width = " + style.width);
  
  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }
})();

<div id="target" style="display: inline-block; width: 50%">x</div>