查找应用于元素的所有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，可能还有其他)