Question

I’m trying to write a function that will receive a CSS Rule to update along with the CSS to update the Rule with, so far I have the following:

getCSSRule:function(getRule, newRule){
    var styles=document.styleSheets;
    for(var i=0,l=styles.length; i<l; ++i){
        var sheet=styles[i]; 

        if(sheet.title === "style"){
            var rules=sheet.cssRules;
            for(var j=0, l2=rules.length; j<l2; j++){
                var rule=rules[j];

                // SELECT APPROPRIATE RULE IN STYLESHEET
                if(getRule === rule){  

                    // LOSE IT HERE

                };
            };
        };
    };
},

So far the code works. It finds all of the stylesheets, targets one by title, then loops through that stylesheet’s rules. The problem I’m running into now is comparing the getRule (CSS rule name passed into the function) with the rule in the CSS. I’m new to using the document.styleSheets and find the structure somewhat confusing.
Any help is greatly appreciated. Thanks!

Answer 1

CSS rules don’t have names. Perhaps you meant selectorText? If so, you can pick the correct rule like this:

if (getRule === rule.selectorText) {
    /* do stuff */
}

getRule is the exact selector(s) of the wanted rule. In the case “exact” means really exact form of the selector. Example stylesheet:

.div {...}
#div {...}
div {...}
div:hover {...}

If you want to change the rule for div class, your getRule should be .div, if you want to change the rule for div.hover, getRule should be .div:hover etc.