Глава 4.9. Динамические таблицы стилей

4.9.1. Включение таблиц стилей в документ

В DOM 2 добавлена поддержка динамических таблиц стилей произвольного типа, хотя на сегодняшний день единственным языком таблиц стилей является CSS. Как указано в п. 2.1.2, в HTML таблица стилей может быть либо внешней (и задаваться элементом LINK), либо внутренней (и задаваться элементом STYLE).

В XML таблицы стилей могут быть только внешними и задаются директивой xml-stylesheet, имеющей следующий вид:

Синтаксис: <?xml-stylesheet атрибуты?>
Атрибуты:  href = CDATA #REQUIRED (URI таблицы стилей)
           type = CDATA #REQUIRED (тип файла таблицы стилей)
           title = CDATA #IMPLIED (титул таблицы стилей)
           media = CDATA #IMPLIED (список устройства отображения)
           charset = CDATA #IMPLIED (кодировка таблицы стилей)
           alternate = (yes|no) "no"

Здесь атрибуты href, title, media и charset в точности соответствуют атрибутам HTML-элемента <LINK rel="StyleSheet">. Атрибут alternate="yes" означает, что данная директива имеет семантику элемента <LINK rel="Alternate StyleSheet">. Примеры:

<?xml-stylesheet href="mystyle.css" type="text/css" media="screen"?>
<?xml-stylesheet alternate="yes" href="mystyle.css" media="print" type="text/css"?>

Примечание. Поскольку значением атрибута href является URI общего вида, ссылка на таблицу стилей может быть относительным URI, содержащим закладку. В частности, это может быть ссылка на закладку, расположенную в том же XML-документе, т. е. таблица стилей может содержаться в самом документе.

Описанные в этой главе интерфейсы не являются обязательными для реализации DOM. Если реализация их поддерживает, то рекомендуется, чтобы ее метод DOMImplementation.hasFeature возвращал true при соответствующем запросе.

В MSHTML поддержка стилей отличается от стандарта, поэтому всюду после описания стандартных методов и свойств мы указываем на особенности их реализации в Internet Explorer.

4.9.2. Списки устройств: интерфейс MediaList

Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Интерфейс MediaList соответствует списку устройств отображения, к которым применима таблица стилей. Он представляет собой массив строк, содержащих имена устройств, и имеет следующие свойства и методы:

Свойства интерфейса MediaList
Свойство Изменяемое Модель Описание
length Нет DOM 2 Размер списка устройств.
mediaText Да DOM 2 Текстовое представление списка устройств.
Методы интерфейса MediaList
Метод Модель Описание
appendMedium DOM 2 Добавляет новое устройство в конец списка.
deleteMedium DOM 2 Удаляет заданное устройство из списка.
item DOM 2 Возвращает элемент списка с заданным номером.

Свойство length

Синтаксис:  объект.length
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство length возвращает количество элементов в данном списке устройств.

Свойство mediaText

Синтаксис:  объект.mediaText
Изменяемое: да
Иcключения: SYNTAX_ERR, NO_MODIFICATION_ALLOWED_ERR (при записи)
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство mediaText позволяет получать или задавать список устройств отображения в виде текстовой строки, состоящей из имен устройств, разделенных запятыми и, возможно, пробелами. Пример:

document.styleSheets[0].media.mediaText = "screen, print";

Метод appendMedium

Синтаксис:  объект.appendMedium(newMedium)
Аргументы:  newMedium — выражение типа DOMString
Иcключения: INVALID_CHARACTER_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод appendMedium добавляет устройство newMedium в конец списка устройств. Если это устройство уже есть в списке, то оно будет сначала удалено из него, а затем добавлено. Пример:

document.styleSheets[0].media.appendMedium("print");

Метод deleteMedium

Синтаксис:  объект.deleteMedium(oldMedium)
Аргументы:  oldMedium — выражение типа DOMString
Иcключения: NOT_FOUND_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод deleteMedium удаляет устройство oldMedium из списка устройств. Если этого устройства нет в списке, то генерируется исключение. Пример:

document.styleSheets[0].media.deletedMedium("print");

Метод item

Синтаксис:  объект.item(index)
Аргументы:  index — числовое выражение
Результат:  DOMString или null
Иcключения: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Метод item возвращает элемент списка устройств с номер index. Допустимые значения индекса лежат в диапазоне от 0 до объект.length-1 включительно. Если index выходит за пределы этого диапазона, то возвращается null. Пример:

alert(document.styleSheets[0].media.item(1));

JavaScript позволяет задать обращение к элементам списка более компактным образом. Например, приведенный пример можно записать и так:

alert(document.styleSheets[0].media[1]);

4.9.3. Таблицы стилей: интерфейс StyleSheet

Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Интерфейс StyleSheet соответствует одной таблице стилей, подключаемой к XML- или HTML-документу. Он имеет следующие свойства:

Свойства интерфейса StyleSheet
Свойство Изменяемое Модель Описание
disabled Да DOM 2 Запрещена ли таблица.
href Нет DOM 2 URL внешней таблицы стилей.
media Нет DOM 2 Устройства отображения.
ownerNode Нет DOM 2 Элемент-владелец таблицы.
parentStyleSheet Нет DOM 2 Родительская таблица стилей.
title Нет DOM 2 Титул таблицы.
type Нет DOM 2 Язык таблицы стилей.

Свойство disabled

Синтаксис:  объект.disabled
Изменяемое: да
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Свойство disabled возвращает true, если таблица запрещена, и false в противном случае. Запрещение таблицы стилей означает, что она не будет применяться к текущему документу. Точнее говоря, таблица стилей применяется к документу тогда и только тогда, когда она применима к текущему устройству отображения и ее свойство disabled равно false. Пример:

document.styleSheets[0].disabled = true;

Свойство href

Синтаксис:  объект.href
Изменяемое: нет
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Свойство href возвращает URI файла таблицы стилей для внешних таблиц и null для внутренних таблиц. Если адрес таблицы был задан относительным URI, то MSHTML вернет относительный URI, а Gecko — полный URI. Например,

<LINK rel=stylesheet href="ie4.css">
...
alert(document.styleSheets[0].href);

выведет в Internet Explorer строку ie4.css, а в Gecko строку вида http://mysite.com/ie4.css.

Свойство media

Синтаксис:  объект.media
Изменяемое: нет
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Свойство media возвращает объект MediaList, содержащий список устройств отображения, к которым применима данная таблица стилей. Если атрибут media таблицы стилей не был задан, то список устройств пуст, что соответствует устройству "all" (все типы устройств). Пример:

alert(document.styleSheets[0].media.mediaText);

Internet Explorer не поддерживает объект MediaList, поэтому в нем данное свойство возвращает строку, содержащую список устройств через запятую, т. е. media здесь эквивалентно media.mediaText стандарта.

Свойство ownerNode

Синтаксис:  объект.ownerNode
Изменяемое: нет
Поддержка: Internet Explorer Только для HTML-документов под названием owningElement.
           Gecko Соответствует стандарту.

Свойство ownerNode возвращает ссылку на объект Node, соответствующий узлу документа, ссылающемуся на данную таблицу стилей. Как указывалось выше, в HTML-документе таблица стилей задается либо элементом LINK, либо элементом STYLE; в XML-документе данное свойство должно указывать на узел типа ProcessingInstruction, содержащий директиву xml-stylesheet. Для таблиц стилей, подключенных к документу через другие таблицы стилей, это свойство равно null. Пример: в Gecko

alert(document.styleSheets[0].ownerNode.tagName);

в Internet Explorer:

alert(document.styleSheets[0].owningElement.tagName);

Свойство parentStyleSheet

Синтаксис:  объект.parentStyleSheet
Изменяемое: нет
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Если язык таблицы стилей допускает включение одних таблиц стилей в другие (таков, в частности, CSS2), и данная таблица подключена к документу через другую таблицу стилей, то свойство parentStyleSheet возвращает ссылку на объект StyleSheet, соответствующий таблице стилей, в которую включена данная таблица. В остальных случаях это свойство равно null. Следующий пример выводит на экран URI таблицы стилей верхнего уровня, содержащую данную таблицу стилей в качестве вложенного потомка.

var ss = document.styleSheets[0];
while (ss.parentStyleSheet)
  ss = ss.parentStyleSheet;
alert(ss.href);

Свойство title

Синтаксис:  объект.title
Изменяемое: нет
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Свойство title возвращает титул узла-владельца данной таблицы стилей, т. е. значение свойства ownerNode.title. Пример:

alert(document.styleSheets[0].title);

Свойство type

Синтаксис:  объект.type
Изменяемое: нет
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Свойство type возвращает язык данной таблицы стилей, т. е. значение свойства ownerNode.type. Если втрибут type узла-владельца не задан, то MSHTML вернет пустую строку, а Gecko — строку "text/css", соответствующую языку таблиц стилей, принятому по умолчанию. Пример:

alert(document.styleSheets[0].type);

4.9.4. Списки таблиц стилей: интерфейс StyleSheetList

Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Интерфейс StyleSheetList реализует упорядоченные списки таблиц стилей. Он имеет единственное свойство length, возвращающее количество таблиц в списке, и единственный метод item, возвращающий элемент списка с заданным номером (элементы списка нумеруются, начиная с нуля).

Свойство length

Синтаксис:  список.length
Изменяемое: нет
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Свойство length возвращает количество таблиц в данном списке. Допустимые индексы элементов списка лежат в диапазоне от 0 до length-1 включительно. Следующий пример выводит на экран количество таблиц стилей в документе:

alert(document.styleSheets.length);

Метод item

Синтаксис:  список.item(index)
Аргументы:  index — числовое выражение
Результат:  объект StyleSheet или null
Исключения: нет
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Метод item возвращает элемент списка таблиц с заданным индексом в качестве результата. Если индекс выходит за пределы диапазона элементов списка, то возвращается null. Пример:

alert(document.styleSheets.item(0).href);

JavaScript позволяет нам записать обращение к элементу списка более компактно. Предыдущий оператор может выглядеть так:

alert(document.styleSheets[0].href);

Internet Explorer поддерживает еще одну форму обращения к элементу списка, а именно:

alert(document.styleSheets(0).href);

Однако, эта форма является нестандартной, и ей лучше не пользоваться.

4.9.5. Таблицы стилей на языке CSS

Для практической реализации динамических стилей мы должны перейти от абстрактных интерфейсов, описанных выше, к их конкретной реализации применительно к языку CSS (точнее, CSS2). Такой конкретизацией интерфейса StyleSheet для CSS является интерфейс CSSStyleSheet, который обеспечивает доступ к коллекции правил, содержащихся в таблице стилей, и содержит методы, позволяющие изменять эту коллекцию. Но прежде, чем перейти к его описанию, мы должны описать интерфейсы, соответствующие отдельных правилам и директивам языка CSS. Все эти интерфейсы являются производными от базового интерфейса CSSRule, с которого мы и начнем рассмотрение.

Все объекты, связанные с CSS, являются "живыми" в том смысле, что изменение таблицы стилей влечет изменение всех соответствующих стилей.

4.9.6. Операторы CSS: интерфейс CSSRule

Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Интерфейс CSSRule — это базовый абстрактный интерфейс для представления операторов языка CSS, включая и директивы, и правила этого языка. Он имеет следующие свойства:

Свойства интерфейса CSSRule
Свойство Изменяемое Модель Описание
cssText Да DOM 2 Текст оператора.
parentRule Нет DOM 2 Директива, содержащая данный оператор.
parentStyleSheet Нет DOM 2 Таблица стилей, содержащая данный оператор.
type Нет DOM 2 Тип оператора.

Свойство cssText

Синтаксис:  объект.cssText
Изменяемое: да
Иcключения: SYNTAX_ERR, INVALID_MODIFICATION_ERR, HIERARCHY_REQUEST_ERR,
            NO_MODIFICATION_ALLOWED_ERR (при записи)
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Свойство cssText позволяет читать или задавать текстовое представление данного оператора. При задании нового текста оператора возможна генерация перечисленных выше исключений. Следующий пример выводит на экран текст первого оператора первой таблицы стилей документа:

alert(document.styleSheets[0].cssRules[0].cssText);

В Internet Explorer этот оператор должен выглядеть так:

alert(document.styleSheets[0].rules[0].style.cssText);

Свойство parentRule

Синтаксис:  объект.parentRule
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Если данный оператор вложен в другой оператор CSS (например, в директиву @media), то свойство parentRule возвращает объект CSSRule для оператора, содержащего данный. В противном случае возвращается null. Пример:

alert(document.styleSheets[0].cssRules[0].parentRule);

В объектной модели MSHTML директивы CSS недоступны, и ссылку на оператор, содержащий данный, получить невозможно.

Свойство parentStyleSheet

Синтаксис:  объект.parentStyleSheet
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство parentStyleSheet возвращает объект CSSStyleSheet, соответствующий таблице стилей, содержащее данный оператор. Пример:

alert(document.styleSheets[0].cssRules[0].parentStyleSheet);

В MSHTML правила CSS не содержат ссылки на свою таблицу стилей.

Свойство type

Синтаксис:  объект.type
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Свойство type возвращает целое число, означающее тип данного оператора CSS в соответствии со следующей таблицей:

Таблица 4.5. Типы операторов CSS
Название Значение Интерфейс Описание
UNKNOWN_RULE 0 CSSUnknownRule Неизвестный оператор
STYLE_RULE 1 CSSStyleRule Правило CSS
CHARSET_RULE 2 CSSCharsetRule Директива @charset
IMPORT_RULE 3 CSSImportRule Директива @import
MEDIA_RULE 4 CSSMediaRule Директива @media
FONT_FACE_RULE 5 CSSFontFaceRule Директива @font-face
PAGE_RULE 6 CSSPageRule Директива @page

В объектной модели MSHTML доступны только правила CSS, но не директивы, поэтому данное свойство лишено смысла и не поддерживается.

4.9.7. Правила CSS: интерфейс CSSStyleRule

Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Интерфейс CSSStyleRule — это интерфейс, производный от CSSRule и соответствующий одному правилу языка CSS. Напомним, что правило CSS состоит из селектора и блока деклараций. Поэтому данный интерфейс имеет два дополнительных свойства:

Свойства интерфейса CSSStyleRule
Свойство Изменяемое Модель Описание
selectorText Да DOM 2 Текст селектора.
style Нет DOM 2 Блок деклараций.

Свойство selectorText

Синтаксис:  объект.selectorText
Изменяемое: да
Иcключения: SYNTAX_ERR, NO_MODIFICATION_ALLOWED_ERR (при записи)
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Свойство selectorText позволяет читать или задавать текст селектора данного правила. При задании нового текста селектора возможна генерация перечисленных выше исключений. Следующий пример выводит на экран текст селектора первого оператора первой таблицы стилей документа:

alert(document.styleSheets[0].cssRules[0].selectorText);

В Internet Explorer этот оператор должен выглядеть так:

alert(document.styleSheets[0].rules[0].selectorText);

Свойство style

Синтаксис:  объект.style
Изменяемое: нет
Поддержка: Internet Explorer Нестандартная.
           Gecko Соответствует стандарту.

Свойство style возвращает объект CSSStyleDeclaration, содержащий блок деклараций данного правила. Пример чтения значения отдельного свойства CSS:

alert(document.styleSheets[0].cssRules[0].style.fontFamily);

В Internet Explorer этот оператор должен выглядеть так:

alert(document.styleSheets[0].rules[0].style.fontFamily);

4.9.8. Директива @media: интерфейс CSSMediaRule

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс CSSMediaRule — это интерфейс, производный от CSSRule и соответствующий директиве @media. Он имеет следующие дополнительные свойства и методы:

Свойства интерфейса CSSMediaRule
Свойство Изменяемое Модель Описание
cssRules Нет DOM 2 Коллекция правил директивы.
media Нет DOM 2 Коллекция устройств отображения.
Методы интерфейса CSSMediaRule
Метод Модель Описание
deleteRule DOM 2 Удаляет заданное правило.
insertRule DOM 2 Вставляет новое правило.

Свойство cssRules

Синтаксис:  объект.cssRules
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство cssRules возвращает объект CSSRuleList, содержащий список правил данной директивы. Пример:

alert(document.styleSheets[0].cssRules[0].cssRules.length);

Свойство media

Синтаксис:  объект.media
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство media возвращает объект MediaList, содержащий список устройств отображения данной директивы. Пример:

alert(document.styleSheets[0].cssRules[0].media.length);

Метод deleteRule

Синтаксис:  объект.deleteRule(index)
Аргументы:  index — числовое выражение
Исключения: INDEX_SIZE_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод deleteRule удаляет правило с номером index из коллекции cssRules. Индекс должен лежать в диапазоне от 0 до cssRules.length-1 включительно. Пример:

document.styleSheets[0].cssRules[0].deleteRule(0);

Метод insertRule

Синтаксис:  объект.insertRule(rule, index)
Аргументы:  rule — выражение типа DOMString
            index — числовое выражение
Исключения: HIERARCHY_REQUEST_ERR, INDEX_SIZE_ERR, NO_MODIFICATION_ALLOWED_ERR,
            SYNTAX_ERR
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Метод insertRule вставляет новое правило в коллекцию cssRules перед правилом с номером index. Текст правила, включая селектор и декларацию, задается аргументом rule. Индекс должен лежать в диапазоне от 0 до cssRules.length; если он равен cssRules.length, то новое правило добавляется в конец коллекции. Пример:

document.styleSheets[0].cssRules[0].insertRule("BODY { color: red }", 0);

4.9.9. Директива @font-face: интерфейс CSSFontFaceRule

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс CSSFontFaceRule — это интерфейс, производный от CSSRule и соответствующий директиве @font-face. Он имеет одно дополнительное свойство style.

Свойство style

Синтаксис:  объект.style
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство style возвращает объект CSSStyleDeclaration, содержащий блок деклараций данной директивы. Пример чтения значения отдельного дескриптора шрифта:

alert(document.styleSheets[0].cssRules[0].style.fontFamily);

4.9.10. Директива @page: интерфейс CSSPageRule

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс CSSPageRule — это интерфейс, производный от CSSRule и соответствующий директиве @page. Он имеет два дополнительных свойства selectorText и style, которые соответствуют одноименным свойствам интерфейса CSSStyleRule.

4.9.11. Директива @import: интерфейс CSSImportRule

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс CSSImportRule — это интерфейс, производный от CSSRule и соответствующий директиве @import. Он имеет следующие дополнительные свойства:

Свойства интерфейса CSSImportRule
Свойство Изменяемое Модель Описание
href Нет DOM 2 URI импортируемой таблицы стилей.
media Нет DOM 2 Коллекция устройств отображения.
styleSheet Нет DOM 2 Указатель на импортируемую таблицу стилей.

Свойство href

Синтаксис:  объект.href
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство href возвращает URI файла импортируемой таблицы стилей, например,

alert(document.styleSheets[0].cssRules[0].href);

Свойство media

Синтаксис:  объект.media
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство media возвращает объект MediaList, содержащий список устройств отображения данной директивы. Пример:

alert(document.styleSheets[0].cssRules[0].media.length);

Свойство styleSheet

Синтаксис:  объект.styleSheet
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство styleSheet возвращает объект CSSStyleSheet, соответствующий таблице стилей, импортируемой данной директивой. Если таблица стилей еще не загружена (или не будет загружена из-за того, что текущего устройства отображения нет в списке устройств директивы), то возвращается null. Пример:

alert(document.styleSheets[0].cssRules[0].styleSheet);

4.9.12. Директива @charset: интерфейс CSSCharsetRule

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Интерфейс CSSCharsetRule — это интерфейс, производный от CSSRule и соответствующий директиве @charset. Он имеет одно дополнительное свойство encoding.

Свойство encoding

Синтаксис:  объект.encoding
Изменяемое: нет
Иcключения: SYNTAX_ERR, NO_MODIFICATION_ALLOWED_ERR (при записи)
Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Свойство encoding позволяет читать и устанавливать название кодировки символов. Важно понимать, что эта кодировка не влияет на текстовые данные объектов DOM, которые всегда хранятся в кодировке UTF-16. Поэтому данное свойство нужно только для правильной перекодировки исходных документов в Unicode при их загрузке и обратной перекодировки при записи документов. Пример:

document.styleSheets[0].cssRules[0].encoding = "windows-1251";

4.9.13. Неизвестный оператор: интерфейс CSSUnknownRule

Поддержка: Internet Explorer Не поддерживается.
           Gecko Не поддерживается.

Стандарт требует, чтобы анализатор XML- и HTML-документов включал в коллекцию операторов все найденные в таблице стилей операторы, даже если они не могут быть распознаны анализатором. Для хранения таких неопознанных операторов введен интерфейс CSSUnknownRule, производный от CSSRule и не имеющий собственных свойств и методов.

4.9.14. Списки операторов CSS: интерфейс CSSRuleList

Поддержка: Internet Explorer Нестандартная, только для HTML-документов.
           Gecko Соответствует стандарту.

Интерфейс CSSRuleList реализует упорядоченные списки операторов CSS. Он имеет единственное свойство length, возвращающее количество элементов в списке, и единственный метод item, возвращающий элемент списка с заданным номером (элементы списка нумеруются, начиная с нуля).

Свойство length

Синтаксис:  список.length
Изменяемое: нет
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Свойство length возвращает количество операторов в данном списке. Допустимые индексы элементов списка лежат в диапазоне от 0 до length-1 включительно. Следующий пример выводит на экран количество операторов в первой таблице стилей документа:

alert(document.styleSheets[0].cssRules.length); // в Gecko
alert(document.styleSheets[0].rules.length);    // в Internet Explorer

Метод item

Синтаксис:  список.item(index)
Аргументы:  index — числовое выражение
Результат:  объект CSSRule или null
Исключения: нет
Поддержка: Internet Explorer Только для HTML-документов.
           Gecko Соответствует стандарту.

Метод item возвращает элемент списка операторов с заданным индексом в качестве результата. Если индекс выходит за пределы диапазона элементов списка, то возвращается null. Пример:

alert(document.styleSheets[0].cssRules.item(0).cssText);

JavaScript позволяет нам записать обращение к элементу списка более компактно. Предыдущий оператор может выглядеть так:

alert(document.styleSheets[0].cssRules[0].cssText);

Internet Explorer поддерживает еще одну форму обращения к элементу списка, а именно:

alert(document.styleSheets[0].rules(0).style.cssText);

Однако, эта форма является нестандартной, и ей лучше не пользоваться.

4.9.15. Таблицы стилей CSS: интерфейс CSSStyleSheet

Поддержка: Internet Explorer Нестандартная, только для HTML-документов.
           Gecko Соответствует стандарту.

Интерфейс CSSStyleSheet соответствует одной таблице стилей на языке CSS. Он является производным от интерфейса StyleSheet и имеет следующие дополнительные свойства и методы:

Свойства интерфейса CSSStyleSheet
Свойство Изменяемое Модель Описание
cssRules Нет DOM 2 Коллекция операторов таблицы.
ownerRule Нет DOM 2 Директива, которой импортирована данная таблица.
Методы интерфейса CSSStyleSheet
Метод Модель Описание
deleteRule DOM 2 Удаляет заданное правило из таблицы.
insertRule DOM 2 Вставляет новое правило в таблицу.

Свойство cssRules

Синтаксис:  объект.cssRules
Изменяемое: нет
Поддержка: Internet Explorer Под названием rules.
           Gecko Соответствует стандарту.

Свойство cssRules возвращает объект CSSRuleList, содержащий список всех операторов данной таблицы стилей. Пример:

alert(document.styleSheets[0].cssRules[0].cssText);

В Internet Explorer это свойство называется rules и возвращает коллекцию всех правил таблицы, т. е. директивы в нее не включаются:

alert(document.styleSheets[0].rules[0].style.cssText);

Свойство ownerRule

Синтаксис:  объект.ownerRule
Изменяемое: нет
Поддержка: Internet Explorer Не поддерживается.
           Gecko Соответствует стандарту.

Если данная таблица стилей импортирована директивой @import, то свойство ownerRule возвращает объект CSSImportRule, соответствующий этой директиве. В этом случае свойство таблицы ownerNode равно null. В остальных случаях данное свойство возвращает null. Пример:

var imported = document.styleSheets[0].ownerRule != null;
var external = document.styleSheets[0].ownerNode.tagName == "link";
var sstype = (imported ? "импортированная" : (external ? "внешняя" : "внутренняя"));
alert(sstype + " таблица");

Internet Explorer это свойство не поддерживает. Вместо него таблицы содержат нестандартное свойство imports, которое возвращает коллекцию всех таблиц, импортированных данной таблицей, и метод addImport(URL, index), добавляющий таблицу с заданным URL в эту коллекцию (аргумент index следует тем же правилам, что и в методе addRule).

Метод deleteRule

Синтаксис:  объект.deleteRule(index)
Аргументы:  index — числовое выражение
Исключения: INDEX_SIZE_ERR, NO_MODIFICATION_ALLOWED_ERR
Поддержка: Internet Explorer Под названием removeRule.
           Gecko Соответствует стандарту.

Метод deleteRule удаляет правило с номером index из коллекции cssRules. Индекс должен лежать в диапазоне от 0 до cssRules.length-1 включительно. Пример:

document.styleSheets[0].deleteRule(0);

В Internet Explorer этот метод называется removeRule и аргумент index в нем может быть опущен; в этом случае удаляется первое правило коллекции:

document.styleSheets[0].removeRule();

Метод insertRule

Синтаксис:  объект.insertRule(rule, index)
Аргументы:  rule — выражение типа DOMString
            index — числовое выражение
Исключения: HIERARCHY_REQUEST_ERR, INDEX_SIZE_ERR, NO_MODIFICATION_ALLOWED_ERR,
            SYNTAX_ERR
Поддержка: Internet Explorer Под названием addRule.
           Gecko Соответствует стандарту.

Метод insertRule вставляет новое правило в коллекцию cssRules перед правилом с номером index. Текст правила, включая селектор и декларацию, задается аргументом rule. Индекс должен лежать в диапазоне от 0 до cssRules.length; если он равен cssRules.length, то новое правило добавляется в конец коллекции. Пример:

document.styleSheets[0].insertRule("BODY { color: red }", 0);

В Internet Explorer этот метод называется addRule и имеет вид addRule(selector, style, index), где selector — текст селектора, style — текст декларации свойств, а index — позиция вставки нового правила. Если аргумент index опущен, то правило добавляется в конец коллекции. Пример:

document.styleSheets[0].addRule("BODY", "color: red", 0);