Объекты и правила таблиц стилей

В дополнение к возможности включения и отключения тегов <link> и <style>, ко_ торые ссылаются на таблицы стилей, модель DOM Level 2 определяет API для получения, обхода и манипулирования самими таблицами стилей. К моменту на_ писания этих строк значительная часть стандарта прикладного интерфейса (API) для обхода таблиц стилей поддерживалась только одним броузером – Firefox.

В IE 5 используется иной прикладной интерфейс, а остальные броузеры имеют ограниченную (или вообще не имеют) поддержку средств непосредственного ма_ нипулирования таблицами стилей.

Как правило, непосредственное манипулирование таблицами стилей редко быва_ ет полезным. Вместо того чтобы добавлять новые правила в таблицы стилей,

обычно лучше оставить их статичными и работать со свойством className элемен_ та. В то же время, если необходимо предоставить пользователю возможность пол_ ного управления таблицами стилей веб_страницы, может потребоваться органи_ зовать динамическое манипулирование таблицами (возможно с сохранением пользовательских предпочтений в виде cookie_файлов). Если будет принято реше_ ние о реализации прямого манипулирования таблицами стилей, то в этом вам по_ может программный код, который приводится в данном разделе. Этот код работа_ ет в броузерах Firefox и IE, но возможно не будет работать в других броузерах.

Таблицы стилей, применяемые к документу, хранятся в массиве styleSheets[] в объекте документа. Если в документе определена единственная таблица сти_ лей, к ней можно обратиться так:

var ss = document.styleSheets[0]

Элементами этого массива являются объекты CSSStyleSheet. Обратите внимание: эти объекты – не то же самое, что теги <link> или <style>, которые ссылаются на таблицы стилей или содержат эти таблицы. Объект CSSStyleSheet имеет свойство_ массив cssRules[], где хранятся правила стилей:

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

Броузер IE не поддерживает свойство cssRules, но имеет эквивалентное ему свой_ ство rules.

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

Объект CSSRule имеет два свойства, которые могут использоваться переносимым способом. (В W3C DOM правила, не относящиеся к правилам стилей, не имеют этих свойств и потому, возможно, вам потребуется пропускать их при обходе таблицы стилей.) Свойство selectorText – это CSS_селектор для данного правила, а свойство style – это ссылка на объект CSS2Properties, который описывает стили, связанные с этим селектором. Ранее уже говорилось, что CSS2Properties – это ин_ терфейс доступа к встроенным стилям HTML_элементов через свойство style. Объект CSS2Properties может применяться для чтения существующих или записи новых значений стилей в правилах. Нередко при обходе таблицы стилей интерес представляет сам текст правила, а не разобранное его представление. В этом слу_ чае можно использовать свойство cssText объекта CSS2Properties, в котором содер_ жатся правила в текстовом представлении.

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

// Получить ссылку на первую таблицу стилей документа var ss = document.styleSheets[0];

// Получить массив правил, используя W3C или IE API var rules = ss.cssRules?ss.cssRules:ss.rules;

// Обойти правила в цикле

for(var i = 0; i < rules.length; i++) { var rule = rules[i];

400 Глава 16. CSS и DHTML

// Пропустить @import и другие правила, не являющиеся определениями стилей if (!rule.selectorText) continue;

// Это текстовое представление правила

var ruleText = rule.selectorText + " { " + rule.style.cssText + " }";

// Если правило определяет ширину поля, предположить,

// что в качестве единиц измерения используются пикселы, и удвоить их var margin = parseInt(rule.style.margin);

if (margin) rule.style.margin = (margin*2) + "px";

}

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

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

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

Пример 16.9. Вспомогательные методы для работы с таблицами стилей

/**

* Stylesheet.js: вспомогательные методы для работы с таблицами CSS_стилей.

*

* Этот модуль объявляет класс Stylesheet, который представляет собой просто

* обертку для массива document.styleSheets[]. Он определяет удобные

* межплатформенные методы чтения и изменения таблиц стилей.

**/

// Создает новый объект Stylesheet, который служит оберткой

// для заданного объекта CSSStylesheet.

// Если аргумент ss _ это число, найти таблицу стилей в массиве styleSheet[]. function Stylesheet(ss) {

if (typeof ss == "number") ss = document.styleSheets[ss]; this.ss = ss;

}

// Возвращает массив правил для заданной таблицы стилей. Stylesheet.prototype.getRules = function() {

// Если определено W3C_свойство, использовать его,

// в противном случае использовать IE_свойство

return this.ss.cssRules?this.ss.cssRules:this.ss.rules;

}

// Возвращает правило из таблицы стилей. Если s _ это число, возвращается

// правило с этим индексом. Иначе предположить, что s _ это селектор,

// тогда следует отыскать правило, соответствующее этому селектору. Stylesheet.prototype.getRule = function(s) {

var rules = this.getRules(); if (!rules) return null;

if (typeof s == "number") return rules[s];

// Предположить, что s _ это селектор

// Обойти правила в обратном порядке, чтобы в случае нескольких

// правил с одинаковым селектором мы получили правило с наивысшим приоритетом. s = s.toLowerCase();

for(var i = rules.length_1; i >= 0; i__) {

if (rules[i].selectorText.toLowerCase() == s) return rules[i];

}

return null;

};

// Возвращает объект CSS2Properties для заданного правила.

// Правило может задаваться номером или селектором. Stylesheet.prototype.getStyles = function(s) {

var rule = this.getRule(s);

if (rule && rule.style) return rule.style; else return null;

};

// Возвращает текст стиля для заданного правила. Stylesheet.prototype.getStyleText = function(s) {

var rule = this.getRule(s);

if (rule && rule.style && rule.style.cssText) return rule.style.cssText; else return "";

};

// Вставляет правило в таблицу стилей.

// Правило состоит из заданного селектора и строк стилей.

// Вставляется под индексом n. Если аргумент n опущен, правило

// добавляется в конец таблицы.

Stylesheet.prototype.insertRule = function(selector, styles, n) { if (n == undefined) {

var rules = this.getRules(); n = rules.length;

}

if (this.ss.insertRule) // Сначала попробовать использовать W3C API this.ss.insertRule(selector + "{" + styles + "}", n);

else if (this.ss.addRule) // Иначе использовать IE API this.ss.addRule(selector, styles, n);

};

// Удаляет правило из таблицы стилей.

// Если s _ это число, удаляет правило с этим номером.

// Если s _ это строка, удаляет правило с этим селектором.

// Если аргумент s не задан, удаляет последнее правило в таблице стилей. Stylesheet.prototype.deleteRule = function(s) {

// Если значение s не определено, превратить его в индекс

// последнего правила

if (s == undefined) {

var rules = this.getRules( ); s = rules.length_1;

}

402 Глава 16. CSS и DHTML

// Если s _ не число, отыскать соответствующее правило

// и получить его индекс.

if (typeof s != "number") {

s = s.toLowerCase( ); // Преобразовать в нижний регистр var rules = this.getRules();

for(var i = rules.length_1; i >= 0; i__) {

if (rules[i].selectorText.toLowerCase() == s) {

s = i; // Запомнить индекс удаляемого правила break; // и прекратить дальнейший поиск

}

}

// Если правило не было найдено, просто ничего не делать. if (i == _1) return;

}

// В этой точке s содержит число.

// Сначала попробовать использовать W3C API, а затем – IE API if (this.ss.deleteRule) this.ss.deleteRule(s);

else if (this.ss.removeRule) this.ss.removeRule(s);

};