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

【问题标题】：Is there a cross-browser method of getting the used css values of all properties of all elements?是否有一种跨浏览器的方法来获取所有元素的所有属性的使用的 css 值？
【发布时间】：2012-06-13 19:12:28
【问题描述】：

我正在寻找页面上所有 DOM 元素的使用 css 值。当我说“使用的值”时，我指的是the W3C specification 中指定的定义：

6.1.3 使用值

在不格式化文档的情况下尽可能处理计算值。但是，某些值只能在文档布局时确定。例如，如果将元素的宽度设置为其包含块的一定百分比，则在确定包含块的宽度之前无法确定宽度。 使用的值是取计算值并将任何剩余的依赖项解析为绝对值的结果。

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

【问题讨论】：

使用的值是您可以使用jquery css 函数获取的值。所以假设你有属性的名字，你只需要遍历所有的 DOM 对象。
“这对我来说没有意义，因为计算的值与使用的值不同（我想要使用的值）” 怎么回事？你能举个例子说明你不会从getComputedStyle（和IE 几乎等同的currentStyle）得到你想要的东西吗？
该函数名称中的“computed”表示“根据 CSS 规则和 DOM 的当前状态计算”。
另外，事实上，除非你想承担一个非常复杂的项目，否则这些 API 就是你所拥有的。

标签： javascript html css dom w3c

【解决方案1】：

注意：自从提出并回答了这个问题后，世界就在不断发展。现在有比以前更多的值层：declared、cascaded、specified、computed、已解决、已使用和实际。 getComputedStyle 返回已解析的值（根据属性，可以是计算的 或使用的）。以下是图层：

来自CSS Cascading and Inheritance Level 4：

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

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

首先，收集所有应用于一个元素的declared values，对于每个元素的每个属性。可能有零个或多个声明值应用于元素。

级联产生cascaded value。每个元素的每个属性最多有一个级联值。

默认生成specified value。每个元素的每个属性都有一个指定的值。

解析值依赖性会产生computed value。每个元素的每个属性都只有一个计算值。

格式化文档会产生used value。一个元素只有一个给定属性的使用值如果该属性适用于元素。

最后根据显示环境的约束，将使用的值转换为actual value。与使用的值一样，元素上的给定属性可能有也可能没有实际值。

那么，CSS Object Model 定义了resolved values：

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

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

...后面是属性列表（特定属性和类别），说明解析的值是 computed 还是 used 值。

在那个背景下：

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

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

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

(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);
  }
})();

&lt;div id="target" style="display: inline-block; width: 50%"&gt;x&lt;/div&gt;

【讨论】：

如果你调用window.getComputedStyle()并传入一个元素节点，它返回的属性通常是normal，而不是像素值。这些值如何被使用？
Window.getComputedStyle 返回“解析值”，即“计算值”或“使用值”，具体取决于属性（并且所有新属性都返回计算机值；使用值情况为只是为了与 CSS 2.0 兼容）。现在在 MDN 页面上说（我意识到这个答案已经有好几年了！）。
@T.J.Crowder 遗憾的是没有！不知道有什么方法可以获得使用价值，这就是我在四处询问之前最终来到这里的方式。
没关系，现在所有的 CSS 问题都可以用 Houdini amirite 轻松解决？
@TJCrowder 与 WG 中的其他人交谈确认答案确实是“否”，尽管“已解决”的定义显然比我上面声称的财产的年龄更复杂.

【解决方案2】：

在大多数情况下，您可以使用 jQuery 或其他首选库。

例如，您的问题标题应用了font-size:100%，可以使用firebug 检索它。但是使用jQuery api，您可以像这样检索使用的值：

$('#question-header .question-hyperlink').css('font-size');//run in console
//or enter this in the url bar
//javascript:alert($('#question-header .question-hyperlink').css('font-size'));
//returns "23.06px"

注意该库包含在此页面中，但创建一个包含 jQuery 并轮询必要属性的书签将相当简单。

【讨论】：