javascript - 第一条规则未正确附加到 CSS JavaScript 函数上？

Question

此函数允许您添加 CSS 规则并将规则放入样式表中，但它有一个附加问题。首先是代码，然后是解释。

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;");

公平地说，这个不是我想出来的。我在网站上找到了这个http://davidwalsh.name/add-rules-stylesheets 。然而它有一个问题。除了第一条规则之外，规则按照应有的方式附加。它附加得很好，也就是说，该规则被识别，但是每当您检查元素时，它都不符合所有其他规则。见下图。基本上，第一条规则不是像所有其他规则一样正确附加。

Answer 1

已经晚了，所以我没有弄清楚你的函数出了什么问题，而是为你创建了一个新函数，这里有一个 demo ，它的工作原理是一样的。

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);
}

用法

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

正如您所看到的，它的功能与另一个类似，在演示中实际上有一个 setTimeout 调用来演示插入规则后更改规则的能力。

希望对你有帮助，如果你还想让我修复其他功能，请告诉我，我早上就会修复，晚安!

更新:这是 demo以您的示例为例，以防万一:)