First Rule not appending correctly on CSS JavaScript Function?

Question

This Function lets you add CSS rules and it puts the rules on your stylesheet, but it has an appending problem. First here is the code then explanation that follows.

var addCSSRule = function(sheet, selector, rules){
//Backward searching of the selector matching cssRules
   var index=sheet.cssRules.length - 1;
   for(var i=index; i>0; i--){
     var current_style = sheet.cssRules[i];
     if(current_style.selectorText === selector){
       //Append the new rules to the current content of the cssRule;
       rules=current_style.style.cssText + rules;
       sheet.deleteRule(i);
       index=i;
     }
   }
   if(sheet.insertRule){
     sheet.insertRule(selector + "{" + rules + "}", index);
   }
   else{
     sheet.addRule(selector, rules, index);
   }
   return sheet.cssRules[index].css;
   }

addCSSRule(myStyleSheet, "#container", "height: 300px;");
addCSSRule(myStyleSheet, "#container", "width: 300px;");
addCSSRule(myStyleSheet, "#container", "border: 2px solid blue;");
addCSSRule(myStyleSheet, "#container", "background-color: red;");

Well to be fair, I didn't come up with this. I found this on a website http://davidwalsh.name/add-rules-stylesheets. However there is a problem with it. The rules append like they should, except for the first rule, well sort of. It appends okay, that is to say, the rule is recognized, but whenever you inspect element, its not with all the other rules. See picture below. Basically the first rule isn't appending right, like all the others.

notice append problem

I think this might simply be due to the fact that the for loop for(var i=index; i>0; i--) only runs while i is greater than zero, whereas it should run as long as i is greater-equal zero. — C3roe
– C3roe, Commented Feb 22, 2015 at 6:07
Interesting observation. Yes, I suppose that does make alot of sense. — dragonore
– dragonore, Commented Feb 22, 2015 at 6:25

undefined · Accepted Answer · 2015-02-22 05:41:51Z

1

It's late, so instead of figuring out what's wrong with your function I've made you a new one, here is a demo, it works just the same.

JavaScript

function setRule(sheet,selector,rules){
    var cssrules = sheet.cssRules;
    for( var i = 0 , l = cssrules.length ; i < l ; i ++ ){
        var cssrule = cssrules[i];
        var cssselector = cssrule.selectorText;
        if( cssselector == selector ){
            var rules = rules.split(";");
            for( var j = 0 , rl = rules.length ; j < rl ; j ++ ){
                var rule = rules[j];
                var parts = rule.split(":");
                var property = parts[0];
                var value = parts[1];
                cssrule.style[property] = value;
            }
            return;
        }
    }
    sheet.insertRule(selector + "{" + rules + "}",cssrules.length);
}

Usage

var sheet = document.styleSheets[0];
setRule(sheet,"div","background:red;width:200px;height:200px;");

As you can see it functions like the other one, in the demo there is actually a setTimeout call to demonstrate the ability to change the rule after inserting it.

Hope it helps, if you still want me to fix the other function, tell me and I'll do it in the morning, good night!

Update: Here is a demo with your example, just in case :)

answered Feb 22, 2015 at 5:41

undefined

4,1757 gold badges29 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dragonore Over a year ago

Wow Rou, works great. This is definetely something I can study and learn from.

Collectives™ on Stack Overflow

First Rule not appending correctly on CSS JavaScript Function?

1 Answer 1

JavaScript

Usage

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

JavaScript

Usage

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related