9

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?

Improve this question
2
  • I should mention I'm only interested in doing this in webkit. Not so much cross browser. Commented Dec 19, 2010 at 12:19
  • possible duplicate of Find all CSS rules that apply to an element Commented Sep 24, 2013 at 13:31

5 Answers 5

Reset to default
13

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;
  }
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Awesome! That's exactly what I was looking for.
Note this only works for rules within stylesheets sent from the same server as the HTML. This is by design
@Jake That's why I get null
What do you pass in as node?
@Anthony a node from the dom.
|
5

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

Improve this answer

2 Comments

this cannot be downloaded
@Ismael The scripts are actually included with the page itself (in order to make the demo work), and I was able to extract them using DevTools.
2

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.

Improve this answer

1 Comment

Thanks Nick, I'm really only interested in doing this in webkit. I should have been more specific but am now glad I left it a bit broad!
1

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
Improve this answer

4 Comments

Thanks but I think this looks up a computed style from the CSS. So this code would help me find out the font-size is 10px;. I don't think it necessarily is meant to find the specific selectors in the CSS is it?
This code would help you find the css rules applied to an element. It doesn't matter where they are originated but the fact that they are applied.
This is what i was looking for. getComputedSyle do what getMatchedCSSRules cannot do, because when there are crosdomain stylesheets getMatchedCSSRules returns null
I think this is the solution for this question: stackoverflow.com/questions/27957680
1

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.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.