2010-02-19 2 views
2

Я попытался использовать $.cssRule() plugin и обнаружил, что неудобно отлаживать эти правила в FireBug, потому что каждое правило подключается к каждому файлу css, загруженному на мою страницу, и поэтому определяется много раз.Почему плагин jQuery.cssRule должен добавлять правила ко всем таблицам стилей?

Source code показывает, что он делает это нарочно внутри, что цикл: для (вар я = 0; я < document.styleSheets.length, я ++) ... insertRule ...

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

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

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

ответ

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

Во всяком случае, это предполагает, что порядок объектов таблиц стилей в коллекции является обратным по отношению к порядку старшинства, который я считаю, что это.

+0

Зачем вам нужно проверять и сопоставлять существующие селектор? Почему бы просто не добавить новый? Есть ли необходимость хранить уникальный список селекторов? Поскольку селекторы «.classname» и «body .classname» в любом случае не будут соответствовать вашему методу, и нет никакого видимого вреда при создании 2 правил с тем же селектором под разными стилями, какой смысл сравнивать все таблицы стилей? Почему бы не создать новый собственный стиль, поставить его в положение с наивысшим приоритетом и сохранить уникальность селектора только там, чтобы разрешить изменения, ранее определенные с помощью этих правил метода? – alpav

+0

Это звучит лучше. Просто делай то, что считаешь нужным, я не собирался иметь идеальное или исчерпывающее решение. В любом случае, следите за совместимостью между браузерами. –

+0

Вот что мне интересно, будет ли мое решение работать, потому что jQuery.cssRule делает это так же, как и вы, а цель jQuery.cssRule - совместимость с несколькими браузерами, поэтому я подозреваю, что мое решение где-то не так. – alpav

0

Вот еще один способ добавить правила или стили и избежать включения нескольких экземпляров.

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

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

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