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

Question

我想获取页面上所有 DOM 元素的已用 css 值。当我说“使用的值”时，我指的是在 the W3C specification 中指定的定义。 :

6.1.3 Used values

Computed values are processed as far as possible without formatting the document. Some values, however, can only be determined when the document is being laid out. For example, if the width of an element is set to be a certain percentage of its containing block, the width cannot be determined until the width of the containing block has been determined. The used value is the result of taking the computed value and resolving any remaining dependencies into an absolute value.

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

Answer 1

注意:自问题被提出和回答以来，世界在不断发展。现在有比以前更多的值层:声明、级联、指定、计算、< em>已解决、已使用和实际。 getComputedStyle 返回解析的值(根据属性计算 或使用)。这是图层:

来自 CSS Cascading and Inheritance Level 4 :

Once a user agent has parsed a document and constructed a document tree, it must assign, to every element in the tree, and correspondingly to every box in the formatting structure, a value to every property that applies to the target media type.

The final value of a CSS property for a given element or box is the result of a multi-step calculation:

1. First, all the declared values applied to an element are collected, for each property on each element. There may be zero or many declared values applied to the element.
2. Cascading yields the cascaded value. There is at most one cascaded value per property per element.
3. Defaulting yields the specified value. Every element has exactly one specified value per property.
4. Resolving value dependencies yields the computed value. Every element has exactly one computed value per property.
5. Formatting the document yields the used value. An element only has a used value for a given property if that property applies to the element.
6. Finally, the used value is transformed to the actual value based on constraints of the display environment. As with the used value, there may or may not be an actual value for a given property on an element.

然后，CSS Object Model定义 resolved values :

getComputedStyle() was historically defined to return the "computed value" of an element or pseudo-element. However, the concept of "computed value" changed between revisions of CSS while the implementation of getComputedStyle() had to remain the same for compatibility with deployed scripts. To address this issue this specification introduces the concept of a resolved value.

The resolved value for a given longhand property can be determined as follows:

...后面是一个属性列表(特定的属性和类别)，说明解析的值是计算的还是使用的值。

在那个背景下:

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

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

解析值可能足以满足您的需求。例如，以下示例显示 207.5px 或类似值，而不是 50%。这是解析值，在这种特殊情况下也是使用值(因为我在 display 不是 none 的元素上使用了 width > 或 contents)，但可能不是实际值，具体取决于亚像素渲染在这种情况下是否可行和合适。

(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>