Книга: JavaScript. Подробное руководство, 6-е издание

16.6.2. Получение, вставка и удаление правил из таблиц стилей

16.6.2. Получение, вставка и удаление правил из таблиц стилей

В дополнение к возможности включения и отключения таблиц стилей объект CSSStyleSheet также определяет API для получения, вставки и удаления правил стиля из таблиц стилей. IE8 и более ранние версии реализуют несколько иной API, отличный от стандартного, реализуемого другими броузерами.

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

Объекты CSSStyleSheet хранятся в массиве document.styleSheets[]. Объект CSSStyleSheet имеет свойство cssRules[], хранящее массив правил стилей:

var firstRule = document.styleSheets[0].cssRules[0];

В IE это свойство носит имя rules, а не cssRules.

Элементами массива cssRules[] или rules[] являются объекты CSSRule. В стандартном API объект CSSRule может представлять CSS-правила любого типа, включая @-правила, такие как директивы @import и @page. Однако в IE массив rules[] может содержать только фактические правила таблицы стилей.

Объект CSSRule имеет два свойства, которые могут использоваться переносимым способом. (В стандартном API правила, не относящиеся к правилам стилей, не имеют этих свойств, и потому, возможно, вам потребуется пропускать их при обходе таблицы стилей.) Свойство selectorText - это CSS-селектор для данного правила, а свойство style - это ссылка на доступный для записи объект CSSStyleDeclaration, который описывает стили, связанные с этим селектором. Напомню, что CSSStyleDeclaration - это тот же самый тип, который используется для представления встроенных и вычисленных стилей. Объект CSSStyleDeclaration может применяться для чтения существующих или создания новых стилей в правилах. Нередко при обходе таблицы стилей интерес представляет сам текст правила, а не, разобранное его представление. В этом случае можно использовать свойство cssText объекта CSSStyleDeclaration, в котором содержатся правила в текстовом представлении.

В дополнение к возможности получения и изменения существующих правил таблиц стилей имеется возможность добавлять правила в таблицу стилей и удалять их из таблицы. Стандартный прикладной интерфейс определяет методы insert-Rule() и deleteRule(), позволяющие добавлять и удалять правила:

document.styleSheets[0].insertRule("H1 { text-weight: bold; }", 0);

Броузер IE не поддерживает методы insertRule() и deleteRule(), но определяет практически эквивалентные им функции addRule() и removeRule(). Единственное существенное отличие (помимо имен функций) состоит в том, что addRule() ожидает получить селектор и стиль в текстовом виде в двух отдельных аргументах.

Следующий пример реализует обход правил в таблице стилей и демонстрирует API, внося несколько сомнительных изменений в таблицу:

var ss = document.styleSheets[0]; // Извлечь первую таблицу стилей
var rules = ss.cssRules?ss.cssRules:ss.rules; // Извлечь правила
for(var і = 0; і < rules.length; і++) { // Цикл по этим правилам
  var rule = rules[і];
  if (!rule.selectorText) continue; // Пропустить @import и др. директивы
  var selector = rule.selectorText; // Селектор
  var ruleText = rule.style.cssText; // Стили в текстовом виде
  // Если правило применяется к элементам h1, применить его к элементам h2
  // Учтите, что этот прием сработает, только если селектор
  // в точности будет иметь вид "h1"
  if (selector == "hi") {
    if (ss.insertRule)
      ss.insertRule("h2 {" +ruleText+ "}", rules.length);
    else if (ss.addRule) ss.addRule("h2", ruleText, rules.length);
  }
  // Если правило устанавливает свойство text-decoration, удалить его.
  if (rule.style.textDecoration) {
    if (ss.deleteRule) ss.deleteRule(i);
    else
      if (ss.removeRule) ss.removeRule(i);
        i--; // Скорректировать переменную цикла, поскольку прежнее правило с
             //индексом i+1 теперь стало правилом с индексом і
  }
}

Оглавление книги