Find all CSS rules that apply to an element
- by Carl Byström
Many tools/APIs provide ways of selecting elements of specific classes or IDs. There's also possible to inspect the raw stylesheets loaded by the browser.
However, for browsers to render an element, they'll compile all CSS rules (possibly from different stylesheet files) and apply it to the element. This is what you see with Firebug or the WebKit Inspector - the full CSS inheritance tree for an element.
How can I reproduce this feature in pure JavaScript without requiring additional browser plugins?
Perhaps an example can provide some clarification for what I'm looking for:
<style type="text/css">
p { color :red; }
#description { font-size: 20px; }
</style>
<p id="description">Lorem ipsum</p>
Here the p#description element have two CSS rules applied: a red color and a font size of 20 px.
I would like to find the source from where these computed CSS rules originate from (color comes the p rule and so on).
