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

【问题标题】：Why does jQuery.cssRule plugin have to add rules to all style-sheets?为什么 jQuery.cssRule 插件必须为所有样式表添加规则？
【发布时间】：2010-02-19 22:31:42
【问题描述】：

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

Source code 表明它在 for 循环中是故意这样做的：for(var i = 0; i

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

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

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

【问题讨论】：

标签： javascript jquery css jquery-plugins

【解决方案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;
        }
    }
}

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

【讨论】：

为什么要检查和匹配现有的选择器？为什么不只是添加一个新的？是否需要保留唯一的选择器列表？由于选择器 '.classname' 和 'body .classname' 无论如何都不会与您的方法匹配，并且在不同样式表下使用相同选择器创建 2 条规则没有明显的危害，那么在所有样式表之间进行比较有什么意义？为什么不创建新的自己的样式表，将其置于最高优先级位置并仅在此处保持选择器的唯一性，以允许更改先前使用该方法规则定义的内容？
听起来更好。做任何你认为合适的事情，我并不打算有一个完美或详尽的解决方案。无论如何，请注意跨浏览器的兼容性。
这就是我想知道我的解决方案是否会起作用，因为 jQuery.cssRule 的工作方式与您相同，而 jQuery.cssRule 的目的是跨浏览器兼容性，所以我怀疑我的解决方案在某个地方是错误的.

【解决方案2】：

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

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

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

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

【讨论】：