Почему плагин jQuery.cssRule должен добавлять правила ко всем таблицам стилей?

Question

Я попытался использовать плагин $. CssRule () и обнаружил, что отладка этих правил в FireBug неудобна, поскольку каждое правило, похоже, прикрепляется к каждому файлу CSS, загруженному на моей странице, и, следовательно, определяется много раз.

Исходный код показывает, что он делает это специально внутри цикла for: for (var i = 0; i

Почему он не может добавить новую собственную таблицу стилей, а затем добавить к ней правила?

Если это необходимо для определения приоритетов правил, то почему бы не перемешать таблицы стилей?

Я заметил ту же проблему здесь , поэтому, если эти 2 места не взяты из одного и того же источника с ошибкой, я удивляюсь, почему это необходимо сделать таким образом.

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

Вы создаете стиль с идентификатором, затем добавляете свои правила или стили.