我想使用 JavaScript 获取样式已被样式表更改的元素的计算样式。元素的样式不会通过内联 CSS 更改，这意味着 style属性(property)根本没有帮助。我在 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 内的 span 在我原来的 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;'，则第二行将不正确。
对于如何解决这个问题，您有什么建议吗？
最佳答案
你将不得不实现一个 CSS 引擎，这不是一件容易的事。
来自 Firebug Lite 的人已经做到了。您可能想看看他们的 getElementRules 和 getInheritedRules 方法。
关于javascript - 在运行时确定元素通过 JavaScript 实现了哪些样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4609830/