许多工具/ 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,也可能适用于其他工具)