查找应用于元素的所有css规则。

Question

查找应用于元素的所有css规

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

但是，对于浏览器呈现元素，它们将编译所有CSS规则(可能来自不同的样式表文件)并将其应用于元素。这就是Firebug或WebKit检查器所看到的-元素的完整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规则等等)。

Answer 1

这个答案现在被否决了，不再适用于Chrome 64+..前往历史背景。事实上，bug报告链接到这个问题，以获得使用此问题的替代解决方案。似乎经过一小时的研究，我终于回答了自己的问题。就这么简单：window.getMatchedCSSRules(document.getElementById("description"))(工作于WebKit/Chrome，可能还有其他)