Шрифт:
}
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
// Учтите, что этот прием сработает, только если селектор
// в точности будет иметь вид "h1"
if (selector == "hi") {
if (ss.insertRule)
ss.insertRule("h2 {" +ruleText+ "}", rules.length);
else if (ss.addRule) ss.addRule("h2", ruleText, rules.length);
}
// Если правило устанавливает свойство text-decoration, удалить его.
if (rule.style.textDecoration) {
if (ss.deleteRule) ss.deleteRule(i);
else
if (ss.removeRule) ss.removeRule(i);
i--; // Скорректировать переменную цикла, поскольку прежнее правило с
//индексом i+1 теперь стало правилом с индексом і
}