Question

I want to load the key value pairs from a class, or id, in a CSS stylesheet into a JavaScript object in order to access the data.

Note that I do NOT want to add that class to a DOM element (at least not directly)

The only way I can see in JQuery is to create a dummy hidden element, add my class to it using

$(“#dummy").addClass(“myclass”);

and then query that using

$(“#dummy”).(cssproperty);

But even there I want to see each css property, without knowing what they are in advance.

What I really need is something simple that loads a CSS class into a hash.
I’m not seeing that in jQuery… is there something in regular JavaScript?

thanks
–Rob

Answer 1

Two options for you:

1) The Stylesheet object

…discussed here and here. That gives you direct access to the class definition, from which you can read the style properties directly and apply them to your DOM element.

Sadly, I don’t have time to dash off an example right now, but the links above have them. Basically, you loop through the stylesheets (document.styleSheets) and for each stylesheet, loop through the cssRules (rules on some browsers). Each rule has a selectorText telling you what its selector looks like (“.foo” or whatever). When you find the rule with the selector matching your class, you can loop through the properties on its style property using for (name in rule.style), with the value being rule.style[name] inside the loop.

2) getComputedStyle:

Do as you said and apply the class to an off-page element, then use the getComputedStyle (MDC, MSDN) function to get the style object for its computed style. Be careful, though, as the computed style may have items that are inherited (e.g., from styles applied to all children of body or even html).