小编典典

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

javascript

许多工具/ 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规则,依此类推)。


阅读 533

收藏
2020-04-25

共1个答案

小编典典

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


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

就这么简单:

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

(适用于WebKit / Chrome,也可能适用于其他工具)

2020-04-25