Can I programmatically traverse a CSS stylesheet?

Question

jQuery provides a nice, neat way to traverse the DOM...what I'm looking for is a way to traverse a stylesheet, getting and setting attributes for the defined styles.

Example Stylesheet

div {
    background: #FF0000;
    display: block;
}

.style {
    color: #00AA00;
    font-family: Verdana;
}

html body > nav.menu {
    list-style: none;
}

Now imagine the following code is like jQuery for CSS...

Getting values from the CSS

$("div").attr("background");
//returns #FF0000;

$(".style").attr("color");
// returns #00AA00;

$("html body > nav.menu").attr("color");
// returns undefined;

Setting values in the CSS

$("div").attr("background", "#0000FF");

$(".style").attr("color", "#CDFF4E");

$("html body > nav.menu").attr("color", "#FFFFFF");

Fairly certain this is not possible...but just a wild stab in the dark!

Using jQuerry, you can set CSS properties with `.css` method. See [link](http://api.jquery.com/css/) — Daew, Jan 08 '14 at 00:37
@Daew, I know, but I don't want to set css properties on elements. I want to set/get them directly from the stylesheet. — Matthew Layton, Jan 08 '14 at 00:38
There's a nice tutorial here: http://davidwalsh.name/add-rules-stylesheets — Sam Dufel, Jan 08 '14 at 00:39
What would the purpose of having get/set attributes and properties directly to the stylesheet using js? — Jason, Jan 08 '14 at 00:40
possible duplicate of [Parsing CSS in JavaScript / jQuery](http://stackoverflow.com/questions/3326494/parsing-css-in-javascript-jquery) — Mike Brant, Jan 08 '14 at 00:41
@Jason, for example: There is a class in .NET called SystemColors, which is dependent on underlying theme content. I was wondering if a similar principle could be modeled with CSS / JavaScript. — Matthew Layton, Jan 08 '14 at 00:45
@Jason Perhaps allowing the setting of global styles to a user provided value? Like say, I want all links on my site to be red. Setting that globally would be better than on every link. But there is a lot of ways to accomplish that. Whether this is the best, I'm not sure as I haven't really played with it. — Alex Wayne, Jan 08 '14 at 00:47

score 7 · Answer 1 · answered Jan 08 '14 at 00:39

I think you can, but the interface is more obtuse than you probably want.

document.styleSheets returns a StyleSheetList object that seems to behave in an array like way.

So document.styleSheets[0] returns a CSSStyleSheet object. Look to have lots of ways to analyze it's content. And each CSSStyleSheet has a cssRules property which returns a CSSRuleList.

And you can traverse the docs on the various types return by the DOM api from there yourself: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet

Cool. I care not for how obtuse it is. If it can be wrapped into a neater way to manipulate styles...I'll build it. +1 for this answer — Matthew Layton, Jan 08 '14 at 00:40

score 2 · Accepted Answer · answered Jul 31 '15 at 19:55

I just found a way to look through all of your style sheets, using jquery initially:

I have three stylesheets on my page, so first, I must identify the one I need to manipulate and I gave it an id: <style id="localRules">...</style>

Then, I use jQuery to initially find the id'd stylesheet I'm planning to change:

var sheetToChange = "localRules";
var sheets = $(document.styleSheets); 
// loop through all the stylesheets    
for (var thisSheet=0;thisSheet<sheets.length;thisSheet++){
     // find the right stylesheet to work on
     if(sheets[thisSheet].ownerNode.id == sheetToChange ){
          // cross browser referencing of css rules:
          var ruleSet = sheets[thisSheet].cssRules || sheets[thisSheet].rules;
          for (var thisRule=0;thisRule<ruleSet.length;thisRule++){
               // traverse in that style sheet for the rule you want to change, in this case, body:
               if(ruleSet[thisRule].selectorText == "body"){
                    ruleSet[thisRule].style.cursor = "pointer";
               }
           }
           break;               
     }
}

Hope this is helpful...it worked for me, but took a while to figure it out, especially because ownerNode is something I've never heard of before.

Can I programmatically traverse a CSS stylesheet?

2 Answers2

Linked