How to access css selector properties after getting access to selector

Question

.test
{
 color:Red;
 width: 100px;
}

   var r = document.styleSheets[index].rules;   

   r[0].selectorText => Here we get ".test";

Now i want to get access of all .test properties (in this case color and width) in an array and its values ( in this case Red & 100px ).How can i do this?

Phrogz · Accepted Answer · 2012-04-27 18:55:13Z

3

You want the .cssText of the CSSStyleRule. (You can find this yourself with console.log(document.styleSheets[2]) on this page and diving through the items in the console of Chrome or Firebug.)

Also note that while .rules works in some browsers, the DOM Level 2 CSS binding is .cssRules.

Edit: If you need access to individual styles, then use the .style property. Again, you could see if this you used the developer console.

var sheet = document.styleSheets[2];
var rules = sheet.cssRules[1];
console.log( rules ); // Lots of properties
console.log( Object.keys(rules) );
// ["parentRule", "cssText", "type", "selectorText", "style", "parentStyleSheet"]
console.log( rules.style.display ); // "none"

If you want to see just the styles that are applied in this rule, you'll have to either iterate through the properties of the .style collection (which includes properties that were not explicitly set) and check for empty values, or else you'll need to parse the cssText yourself.

edited Apr 27, 2012 at 18:55

answered Apr 27, 2012 at 16:34

Phrogz

304k115 gold badges669 silver badges758 bronze badges

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

6 Comments

Mathachew Over a year ago

Doesn't .cssText only apply to embedded css?

Phrogz Over a year ago

@Mathachew Not sure what you mean. On this page document.styleSheets[2].cssRules[1].cssText #=> "#adzerk2, #adzerk2 + div { display: none !important; }"

Gaurav Over a year ago

thanks for ans but this return all (just like innerhtml of any element) but i want it individualy like a array, like array[0] = color, array[1] = width

Mathachew Over a year ago

@Phrogz I had this mixed up with something I was working on the other night and .cssText wasn't reliable. However, I wasn't aware of document.styleSheets and was instead trying to pull straight from an element with mixed results between IE and Chrome. Edit: this is what I was referring to: jsfiddle.net/Ur474/1

Gaurav Over a year ago

How can i iterate all properties of .style collection

|

Marcus Recck · Accepted Answer · 2012-04-27 16:44:41Z

-1

jQuery makes this easy.

$('.test').each(function(){
    var curColor = $(this).css('color');
    // etc
});

edited Apr 27, 2012 at 16:44

answered Apr 27, 2012 at 16:30

Marcus Recck

5,0432 gold badges19 silver badges27 bronze badges

6 Comments

GillesC Over a year ago

That would fail as this is the DOM element and not a jQuery element thus css is not defined.

Marcus Recck Over a year ago

It would work just fine. this is a jQuery element in the current scope.

GillesC Over a year ago

No it isn't just look at the error in the console on this jsfiddle.net/bMS7D/1

GillesC Over a year ago

api.jquery.com/each "More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element."

Gaurav Over a year ago

but .test is in css file and we are reading it from there r[0].seletorText = ".test"

|

Collectives™ on Stack Overflow

How to access css selector properties after getting access to selector

2 Answers 2

6 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related