Is it possible to find CSS rules from an HTML node via JavaScript?

Question

I want to get an element in the DOM and then lookup what rules in my CSS file(s) are contributing to it's appearance. Similar to what firebug or webkits inspector does. Is there a way to do this in JavaScript?

Update:

I should provide a constraint and a specific example - I am only interested in achieving this in webkit based browsers so cross-browser difficulties are not so much an issue. What I am specifically trying to achieve is this. Let's say I have a stylesheet as follows:

     div {
        background: #f0f0f0;
     }

     .example {
        padding: 10px;
     }

And then let's say some html code like this:

  <div id="test" class="example">
     <hgroup>
        <h1>Test</h1>
        <h2>A sample file to play with.</h2>
     </hgroup>
     <ul class="sample">
        <li id="item_1">Item 1</li>
        <li id="item_2">Item 2</li>
     </ul>
  </div>

So then in javascript I want to be able to have a function that can find the selectors from the CSS that are styling the object:

get_selectors_for(document.getElementById('test'))
// should return:
// ['div','.example']

How complicated is it to reverse query selectors knowing we only need to worry about webkit as opposed to all browsers?

Answer 1

This is what you want. WebKit only. I found out about getMatchedCSSRules by looking at the chromium web inspector source.

  function getAppliedSelectors(node) {
    var selectors = [];
    var rules = node.ownerDocument.defaultView.getMatchedCSSRules(node, '');

    var i = rules.length;
    while (i--) {
      selectors.push(rules[i].selectorText);
    }
    return selectors;
  }

Answer 2

A cross-browser solution I've had good success with is http://www.brothercake.com/site/resources/scripts/cssutilities/

It is very powerful and accurate, derives a lot more information than the webkit-only function mentioned above, and it works on all styles (including those that are cross-site and that aren't active or have been overridden).

Answer 3

Is it possible? Absolutely...is it simple (especially cross-browser with IE in the mix), not so much. If you're really interested in doing this, check out the Firebug Lite CSS source here. At least the methods are decently commented showing what information each is fetching.

....or if you're wanting simply to inspect in a browser that doesn't have an inspector, just use Firebug Lite.