Read all CSS selectors using jQuery

Question

What is the best way to read all CSS selectors from my CSS $("head > style:eq(0)").html(); ?

bobince · Accepted Answer · 2010-09-28 09:52:05Z

3

It varies across browsers. jQuery doesn't help you here, because inspecting the stylesheet data is a quite an unusual thing to want to do, and older/niche browsers can't do it at all. Are you sure you need to inspect stylesheets? What are you aiming to do?

var sheet= document.styleSheets[0];
var rules= 'cssRules' in sheet? sheet.cssRules : sheet.rules;
for (var i= 0; i<rules.length; i++) {
    var rule= rules[i];
    var text= 'cssText' in rule? rule.cssText : rule.selectorText+' {'+rule.style.cssText+'}';
    alert(text);
}

cssRules and cssText are standard DOM Level 2 Style properties, rules and selectorText are for IE<9 compatibility. Note IE<9 will return recreated rules so you'll see eg. PADDING-BOTTOM: 0pt; PADDING-LEFT: 0pt; PADDING-RIGHT: 0pt; PADDING-TOP: 0pt if the original style you specified was padding: 0.

answered Sep 28, 2010 at 9:52

bobince

538k111 gold badges675 silver badges846 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Read all CSS selectors using jQuery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related