Get access to all css style properties?

Question

I want to get access to all CSS properties (not only for a specific selector or element but all) through JavaScript.

I want to iterate through all properties of the .style collection.

How can I do this?

Answer 1

you can use CSSStyleDeclaration object. A CSSStyleDeclaration object makes CSS style attributes available through JavaScript properties. The names of these JavaScript properties correspond closely to the CSS attribute names.

this object has two additional properties:

cssText
The textual representation of a set of style attributes and their values. The text is formatted as in a CSS stylesheet, minus the element selector and the curly braces that surround the attributes and values.

length
The number of attribute/value pairs contained in this CSSStyleDeclaration. A CSSStyleDeclaration object is also an array-like object whose elements are the names of the CSS style attributes that are declared.

https://developer.mozilla.org/en/DOM/CSSStyleDeclaration
https://developer.mozilla.org/en/DOM/CSS

Answer 2

You can see how to access style sheets from javascript here: http://www.quirksmode.org/dom/changess.html.

It's different in IE vs. other browsers and it's a bit of a pain to get all the cross browser stuff right.

var theRules = new Array();
if (document.styleSheets[1].cssRules)
    theRules = document.styleSheets[1].cssRules
else if (document.styleSheets[1].rules)
    theRules = document.styleSheets[1].rules

Often, you can just predefine several CSS rules and then add or remove classes from various objects in order to change the applied styles.