Таблицы стилей CSS: интерфейс CSSStyleSheet
Поддержка : | | Нестандартная, только для HTML-документов. | | | Соответствует стандарту. |
Интерфейс CSSStyleSheet соответствует одной таблице стилей на языке CSS. Он является производным от интерфейса StyleSheet и имеет следующие дополнительные свойства и методы:
Свойства интерфейса CSSStyleSheetСвойство | Изменяемое | Модель | Описание |
---|
cssRules | Нет | DOM 2 | Коллекция операторов таблицы. | ownerRule | Нет | DOM 2 | Директива, которой импортирована данная таблица. |
Методы интерфейса CSSStyleSheetМетод | Модель | Описание |
---|
deleteRule | DOM 2 | Удаляет заданное правило из таблицы. | insertRule | DOM 2 | Вставляет новое правило в таблицу. |
Свойство cssRules
Синтаксис: объект.cssRules Изменяемое: нет
Поддержка : | | Под названием rules. | | | Соответствует стандарту. |
Свойство cssRules возвращает объект CSSRuleList, содержащий список всех операторов данной таблицы стилей. Пример:
alert(document.styleSheets[0].cssRules[0].cssText);
В Internet Explorer это свойство называется rules и возвращает коллекцию всех правил таблицы, т. е. директивы в нее не включаются:
alert(document.styleSheets[0].rules[0].style.cssText);
Свойство ownerRule
Синтаксис: объект.ownerRule Изменяемое: нет
Поддержка : | | Не поддерживается. | | | Соответствует стандарту. |
Если данная таблица стилей импортирована директивой @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
Поддержка : | | Под названием removeRule. | | | Соответствует стандарту. |
Метод 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
Поддержка : | | Под названием addRule. | | | Соответствует стандарту. |
Метод 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);
1 2 3 4 5 6 7
8 8 8
|