6

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

6.1.3 使用值

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

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

4

2 回答 2

4

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

从CSS 级联和继承级别 4：

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

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

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

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

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

给定的速记属性的解析值可以如下确定：

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

在这样的背景下：

getComputedStyle适用于所有主要的现代浏览器。早期版本的 IE 以currentStyle.

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

解析的值可能足以满足您的需要。例如，以下示例显示207.5pxor 类似，not 50%。那是解析的值，这也是此特定情况下的使用值（因为我在is not或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>

于 2012-06-10T17:29:33.690 回答
-4

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

例如，您的问题标题已font-size:100%应用到它，可以用萤火虫检索。但是使用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 并轮询必要属性的书签​​是相当简单的。

于 2012-06-10T23:39:45.863 回答