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?

Answer 1

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.