Question

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

Source code表明它在for循环中有意地这样做：for（var i = 0; i＆lt; 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;
        }
    }
}

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

Answer 2

这是添加规则或样式并避免插入多个实例的另一种方法。

var newRule = 
    'body {' +
        'background: rgb(231, 225, 218);' +
        'padding:3px !important;' +
    '}';

$('<style id="tamper"></style>').appendTo('head');
$('style#tamper').append(newRule);

您创建带有ID的样式，然后附加规则或样式。

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

2 个答案: