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

Элементами массива

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

Объект

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

В дополнение к возможности получения и изменения существующих правил таблиц стилей имеется возможность добавлять правила в таблицу стилей и удалять их из таблицы. Стандартный прикладной интерфейс определяет методы

<b>insert-Rule()</b>
и
<b>deleteRule(),</b>
позволяющие добавлять и удалять правила:

<b>document.styleSheets[0].insertRule(&quot;H1 { text-weight: bold; }&quot;, 0);</b>

Броузер IE не поддерживает методы

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

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

<b>var ss = document.styleSheets[0]; // Извлечь первую таблицу стилей</b>

<b>var rules = ss.cssRules?ss.cssRules:ss.rules; // Извлечь правила</b>

<b>for(var і = 0; і &lt; rules.length; і++) { // Цикл по этим правилам</b>

<b>  var rule = rules[і];</b>

<b>  if (!rule.selectorText) continue; // Пропустить @import и др. директивы</b>

<b>  var selector = rule.selectorText; // Селектор</b>

<b>  var ruleText = rule.style.cssText; // Стили в текстовом виде</b>

<b>  // Если правило применяется к элементам h1, применить его к элементам h2 </b>

<b>  // Учтите, что этот прием сработает, только если селектор </b>

<b>  // в точности будет иметь вид &quot;h1&quot;</b>

<b>  if (selector == &quot;hi&quot;) {</b>

<b>    if (ss.insertRule)</b>

<b>      ss.insertRule(&quot;h2 {&quot; +ruleText+ &quot;}&quot;, rules.length);</b>

<b>    else if (ss.addRule) ss.addRule(&quot;h2&quot;, ruleText, rules.length);</b>

<b>  }</b>

<b>  // Если правило устанавливает свойство text-decoration, удалить его.</b>

<b>  if (rule.style.textDecoration) {</b>

<b>    if (ss.deleteRule) ss.deleteRule(i);</b>

<b>    else</b>

<b>      if (ss.removeRule) ss.removeRule(i);</b>

<b>        i--; // Скорректировать переменную цикла, поскольку прежнее правило с</b>

<b>             //индексом i+1 теперь стало правилом с индексом і</b>

<b>  }</b>

<b>}</b>

16.6.3. Создание новых таблиц стилей

Наконец, имеется возможность создавать совершенно новые таблицы стилей и добавлять их в документ. В большинстве броузеров эта операция выполняется с помощью стандартных приемов, реализованных в модели DOM: создается новый элемент

<b>&lt;style&gt;</b>
и вставляется в документ в раздел
<b>&lt;head&gt;,</b>
затем с помощью свойства
<b>innerHTML</b>
добавляется содержимое таблицы стилей. Однако в IE8 и в более ранних версиях новый объект
<b>CSSStyleSheet</b>
необходимо создавать с помощью нестандартного метода
<b>document.createStyleSheet()</b>
, а текст таблицы стилей добавлять с помощью свойства
<b>cssText</b>
. Пример 16.6 демонстрирует создание новых таблиц:

Пример 16.6. Создание новой таблицы стилей

<b>// Добавляет таблицу стилей в документ и заполняет ее указанными стилями.</b>

<b>// Аргумент styles может быть строкой или объектом. Если это строка.</b>

<b>// она интерпретируется как текст таблицы стилей. Если это объект, то каждое</b>

<b>// его свойство должно определять правило стиля, добавляемое в таблицу.</b>

<b>// Именами свойств являются селекторы, а их значениями - соответствующие стили</b>