Can I put a CSS class into an object?

Question

I have this in a CSS file:

.name-search 
{
border: 2px solid blue;
border-radius: 5px;
}

I want a function that creates a simple JavaScript map from this.

So for the above CSS class,

var x = getCSSMap("name-search");

would be equivalent to

var x = {"border": "2px solid blue", "border-radius": "5px"};

Is there something out there that does this?

Please take a look at these questions to see if they solve your problem: http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element and http://stackoverflow.com/questions/4781410/jquery-how-to-get-all-styles-css-defined-within-internal-external-document-w. They are pretty elaborate, and I remember using one of the solutions presented there. — Matyas, Jun 30 '13 at 19:17
I am not sure the "get the styles of a node" approach will do what the OP wants, as other styles may also apply. — nrabinowitz, Jun 30 '13 at 19:23

score 4 · Answer 1 · answered Jun 30 '13 at 19:29

4

document.styleSheets is an array of all stylesheets on the page.

To get the first rule of the first stylesheet on the page you can use:

document.styleSheets[0].cssRules[0]

Docs http://www.javascriptkit.com/domref/stylesheet.shtml

answered Jun 30 '13 at 19:29

claustrofob

5,448
2
19
22

This is odd. It's telling me document.styleSheets[0] is an object and it has the right href to my css file which contains two rules that are being applied successfully on my page, but document.styleSheets[0].cssRules and document.styleSheets[0].rules are null. – Dan Cancro Jun 30 '13 at 21:14
Ah, it's a chrome problem. – Dan Cancro Jun 30 '13 at 21:45

score 3 · Answer 2 · answered Jun 30 '13 at 19:43

Searches exact selector will return null if not found, or an object with the css styles as property names, camelcased for object notation, standard name for array notation. needs tweaked for allowing multiple selectors etc.

Scans the document.styleSheets for the selector

usage:

var cssobj = css2Obj(".MyStyle");
console.log( cssobj["font-size"] );
console.log( cssobj.fontSize );

Code

function cssCamelCase(name) {
    var parts = name.split("-");
    if( parts.length < 2 )
        return name;
    for(var i=1; i<parts.length;i++) {
        parts[i] = parts[i].charAt(0).toUpperCase() + parts[i].slice(1)
    }
    return parts.join("");
}
function css2Obj(selector) {
   var cssobj = null;
   for(var i=0; i<document.styleSheets.length; i++) {
    if( document.styleSheets[i].cssRules !== null ) {
        var sheet=document.styleSheets[i];
        for(var b=0; b<sheet.cssRules.length; b++) {
            var rule = sheet.cssRules[b];
            if( rule.selectorText == selector ) {
                var style = rule.style;
                if(cssobj === null) 
                    cssobj={};
                for(var c=0; c<style.length; c++) {
                    cssobj[style[c]] = style[cssCamelCase(style[c])];
                    cssobj[cssCamelCase(style[c])] = style[cssCamelCase(style[c])];
                }
            }
        }
    }
   }
   return cssobj;
}

It's easy to test on this page in console. `css2Obj('pre') => null`. However there are number of rules defined in all.css. — dfsq, Jun 30 '13 at 19:50
yea unfortunately it looks like only css files from the same domain get loaded into the documents.styleSheets — Patrick Evans, Jun 30 '13 at 20:00

Can I put a CSS class into an object?

2 Answers2