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