Question

我想使用JavaScript来获取样式已被样式表更改的元素的计算样式。元素的样式不会通过内联CSS更改，这意味着style属性根本没有帮助。我在HTML中找到的唯一可能有用的功能是getComputedStyle。

使用getComputedStyle的问题是它返回元素的所有属性，即使样式表没有为该元素重新定义它。

例如，假设我有以下样式表：

body {
  font-size: 13px;
}
div {
  color: blue;
}
.example {
  font-weight: bold;
}

...以及以下HTML：

<body>
  <div>
    This is a <span class="example">test</span>
  </div>
</body>

当我在span元素上运行以下JavaScript时：

window.getComputedStyle(spanElement)

...我获得该元素的所有CSS属性：

background-attachment: scroll; background-clip: border-box; background-color: 
rgb(255, 255, 255); background-image: none; background-origin: padding-box; 
[...] 
text-anchor: start; writing-mode: lr-tb; glyph-orientation-horizontal: 0deg; 
glyph-orientation-vertical: auto; -webkit-svg-shadow: none; vector-effect: none;

我想要的只是元素重新定义的样式（即那些未被继承的样式），在本例中，它将是：

font-weight: bold;

有没有简单的方法来获取这些信息？如果没有，那么获得这些结果的最佳方法是什么？理想情况下，我想要一个可以快速运行数百个这些元素的解决方案/算法。

最初我以为我可以遍历节点的父元素并比较所有值以确定哪些值不被继承，但是为每个节点比较一百个左右的属性似乎效率很低。只有十几个不同的类，但每个类可以发生数百次，因此，某种缓存机制可以大大提高性能。

我对如何缓存值的第一个想法是存储类名及其值（例如cachedValues['.example'] := 'font-weight: bold;'）。这种方法的问题是CSS选择器可能非常复杂。例如，某些属性是从其父级继承的，这意味着不在div内部的跨区将在我原始的CSS示例中以不同方式呈现。所以我认为我也可以将父项包含在缓存值中（例如cachedValues['div span.example'] := 'font-weight: bold;'）。这里的问题是CSS选择器可以使用:first-child等伪类变得更加复杂。

示例CSS：

div:first-child {
  color: red;
}
div {
  color: blue;
}

示例HTML：

<body>
  <div>Red line</div>
  <div>Blue line</div>
</body>

在这个例子中，如果我存储了cachedValues['div'] := 'font-color: red;'，那么第二行就不正确了。

您对如何解决这个问题有什么建议吗？

Answer 1

你必须实现一个CSS引擎，这不是一件容易的事。

来自Firebug Lite的人已经做到了。您可能需要查看他们的getElementRules和getInheritedRules方法。

Answer 2

结帐these tests from Quirksmode.org。您应该能够使用document.styleSheets访问样式表并解析它。

特别值得注意的是cssText测试。他们似乎抓住了特定选择器的所有规则。

Answer 3

或许你可以做的就是，保留一个单独的javascript文件（anyname.js）或者也可以使用内联脚本并声明这样的东西

$（document）.ready（function（）{

$（'＃'）。each（function（）{

 $('# <div name>').css({ 'font-weight': 'bold' });

}

}

在运行时确定元素通过JavaScript实现的样式

3 个答案: