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

  // Возвращает имена из e.className
  CSSClassList.prototype.toArray = function {
   return this.e.className.match(/\b\w+\b/g) || [];
  };

16.6. Управление таблицами стилей

До сих пор мы видели, как устанавливать и получать значения CSS-свойств стиля и классы отдельных элементов. Однако существует еще возможность управления самими таблицами стилей CSS. Обычно в этом не возникает необходимости, тем не менее такая возможность иногда бывает полезной, и в этом разделе коротко будут представленные возможные приемы.

При работе с самими таблицами стилей вам придется столкнуться с двумя типами объектов. Первый тип - это объекты Element, представляющие элементы <style> и <link>, которые содержат или ссылаются на таблицы стилей. Это обычные элементы документа, и если в них определить атрибут id, вы сможете выбирать их с помощью метода document.getElementByld. Второй тип объектов - объекты CSSStyleSheet, представляющие сами таблицы стилей. Свойство document.styleSheets возвращает доступный только для чтения объект, подобный массиву, содержащий объекты CSSStyleSheet, представляющие таблицы стилей документа. Если в элементе <style> или <link>, определяющем или ссылающемся на таблицу стилей, определить атрибут title, этот объект будет доступен как свойство объекта CSSStyleSheet с именем, указанным в атрибуте title.

Следующие разделы описывают, какие операции могут выполняться с этими элементами <style> и <link> и объектами таблиц стилей.

16.6.1. Включение и выключение таблиц стилей

Простейший прием работы с таблицами стилей является к тому же самым переносимым и надежным. Элементы <style> и <link> и объекты CSSStyleSheet определяют свойство disabled, доступное сценариям на языке JavaScript для чтения и записи. Как следует из его имени, если свойство disabled принимает значение true, таблица стилей оказывается отключенной и будет игнорироваться броузером.

Это наглядно демонстрирует функция disableStylesheet, представленная ниже. Если передать ей число, она будет интерпретировать его как индекс в массиве document.styleSheets. Если передать ей строку, она будет интерпретировать ее как селектор CSS, передаст ее методу document.querySelectorAll (раздел 15.2.5) и установит в значение true свойство disabled всех полученных элементов:

  function disableStylesheet(ss) {
   if (typeof ss === "number")
   document.styleSheets[ss].disabled = true;
   else {
   var sheets = document.querySelectorAll(ss);
   for(var і = 0; і < sheets.length; i++) sheets[i].disabled = true;
   }
  }

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
   // Учтите, что этот прием сработает, только если селектор