javascript - 为什么 jQuery.cssRule 插件必须向所有样式表添加规则？

Question

我尝试使用 $.cssRule() plugin并发现在 FireBug 中调试这些规则很不方便，因为每个规则似乎都附加到我页面上加载的每个 css 文件，因此定义了很多次。

Source code表明它在 for 循环内是故意这样做的:for(var i = 0; i < document.styleSheets.length; i++) ... insertRule ...

为什么它不能添加新的自己的样式表，然后向其中添加规则？

如果有必要对规则进行优先级排序，那为什么不打乱样式表呢？

我注意到同样的问题 here所以除非这两个地方来自同一个有错误的来源，否则我想知道为什么有必要那样做。

Answer 1

我想我记得我为什么在您链接到的答案中这样做。我不只是添加新规则，而是向现有声明添加新规则。所以我必须查找每个样式表才能找到该声明。现在，我现在能想到的最佳优化是以相反的顺序读取 styleSheets，并在第一次遇到 selectorText 后中断循环。这样，您只需修改一个样式表，即具有最高优先级的样式表。

var ss = document.styleSheets;

for (var i=ss.length-1; i>=0; i--) {
    var rules = ss[i].cssRules || ss[i].rules;

    for (var j=0; j<rules.length; j++) {
        if (rules[j].selectorText === ".classname") {
            rules[j].style.color = "green";
            break;
        }
    }
}

无论如何，这假设集合中样式表对象的顺序与优先顺序相反，我相信是这样。