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

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 provi开发者_如何学Cde 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?

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;
  }

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).

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.

There is a reliable way of getting it, mentioned in this blog post:

function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView
            .getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

If you are using Firefox and Firebug, you can try running this code in StackOverflow, to see what you get:

document.defaultView.getComputedStyle(document.getElementById("custom-header"),"")

And with IE and Firebug Lite, you could do:

document.getElementById("custom-header").currentStyle

Well, it's an old subject. Good for Webkit for offering a solution. As suggested, I've looked into firebug-lite and... surprise!! For every node it loops over every rule in every stylesheet checking if the selector matches our nodes or not.