查找适用于元素的所有CSS规则

  • Z时代
  • 2024-01-10
  • 分类：问答

许多工具/ API提供了选择特定类或ID的元素的方法。也可以检查浏览器加载的原始样式表。

但是，对于浏览器渲染元素而言，它们将编译所有CSS规则（可能来自不同的样式表文件）并将其应用于元素。这是您在Firebug或WebKit

Inspector中看到的-元素的完整CSS继承树。

如何在不需要其他浏览器插件的情况下用纯JavaScript重现此功能？

也许一个例子可以澄清我在寻找什么：

<style type="text/css">
    p { color :red; }
    #description { font-size: 20px; }
</style>
<p id="description">Lorem ipsum</p>

在这里，p＃description元素应用了两个CSS规则：红色和20 px的字体大小。

我想找到这些计算的CSS规则的来源（颜色来自p规则，依此类推）。

回答：

编辑：现在不赞成使用此答案，并且[不再适用于Chrome64+。留给历史背景。实际上，错误报告链接回此问题，以提供使用此问题的替代解决方案。

经过一个多小时的研究，看来我设法回答了自己的问题。

就这么简单：

window.getMatchedCSSRules(document.getElementById("description"))

（适用于WebKit / Chrome，也可能适用于其他工具）

以上是 查找适用于元素的所有CSS规则 的全部内容， 来源链接： utcz.com/qa/417624.html

回到顶部