How can I load the attributes of a CSS class in a stylesheet directly into a hash using JavaScript or jQuery?

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).

Answer 2

T.J. Crowder gave me the answer on this one. Here is some code that implements the thing I was looking for:

Step 1: get the stylesheet and the specific rule that I'm interested in:

var stylesheets = document.styleSheets;
var rule = document.styleSheets[0].cssRules[0];

Step 2: Access that specific rule in various ways

rule.style.cssText  // return the full text of that CSS rule
rule.selectorText   // return the selector for that rule e.g. .myclass

Loop through the individual styles:

var styleObj = rule.style;

for (var i = 0; i < styleObj.length; i++) {
  var key = styleObj[i];             // key is the CSS property e.g. 'color'
  var val = styleObj[key.toCamel()]  // val is the CSS value e.g. 'red'
}

NOTE that you have to convert the CSS property to CamelCase for those with hyphens. For example 'font-family' must be converted to 'fontFamily'

For some reason JavaScript and jQuery do not have functions for doing this (Prototype does) so you should stick these extensions to the String class somewhere in your script

String.prototype.toCamel = function(){
return this.replace(/(\-[a-z])/g, function($1){return $1.toUpperCase().replace('-','');});
};
String.prototype.toDash = function(){
return this.replace(/([A-Z])/g, function($1){return "-"+$1.toLowerCase();});
};

I got that from James Roberts' blog