Best IT Recipes

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

I want to get an element in the DOM, and then see what rules in my CSS files contribute to its appearance. Similar to what a firebug inspector or webkits does. Is there any way to do this in JavaScript?

Update:

I have to provide a restriction and a concrete example. I'm only interested in this in webkit-based browsers, so problems with multiple browsers are not so much a problem. What I'm 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 kind of html code looks 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 have a function that can find selectors from CSS that style the object:

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

How difficult is it to reset the query selector, knowing that we only need to worry about webkit and not all browsers?

+6
javascript dom css
Dec 19 '10 at 9:47
source share
5 answers

Is this what you want. WebKit only. I found out about getMatchedCSSRules by looking at the source of the chrome web inspector.

  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; }
+12
Dec 19 '10 at 13:18
source share

The cross-browser solution that I have successfully managed is http://www.brothercake.com/site/resources/scripts/cssutilities/

It is very powerful and accurate, receives much more information than the web kit-only function mentioned above, and works in all styles (including those that are cross-sites and are inactive or overridden).

+6
Sep 07
source share

Is it possible? Absolutely ... it's simple (especially a cross browser with IE in the mix), not so much. If you're really interested in this, check out the source of Firebug Lite CSS here . At least the methods are decent commenting, showing what information is extracted.

.... or if you just want to check in a browser that does not have an inspector, just use Firebug Lite .

+2
Dec 19 '10 at 10:01
source share

There is a reliable way to get it mentioned in this 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 use Firefox and Firebug, you can try running this code on StackOverflow to see what you get:

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

And with IE and Firebug Lite you can do:

 document.getElementById("custom-header").currentStyle
+1
Dec 19 '10 at 10:03
source share

Ok, this is an old item. Good for webkit to solve the problem. As I said, I looked into firebug-lite and ... was surprised !! For each node, it iterates over each rule in each stylesheet, checking if the selector matches our nodes or not.

+1
Jan 15 '11 at 17:29
source share


More articles:


All Articles