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

Флэнаган Дэвид

При работе с самими таблицами стилей вам придется столкнуться с двумя типами объектов. Первый тип - это объекты

Element

, представляющие элементы

<style>

и

<link>,

которые содержат или ссылаются на таблицы стилей. Это обычные элементы документа, и если в них определить атрибут

id

, вы сможете выбирать их с помощью метода

document.getElementByld.

Второй тип объектов - объекты

CSSStyleSheet

, представляющие сами таблицы стилей. Свойство

document.styleSheets

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

объекты

CSSStyleSheet

, представляющие таблицы стилей документа. Если в элементе

<style>

или

<link>,

определяющем или ссылающемся на таблицу стилей, определить атрибут

title

, этот объект будет доступен как свойство объекта

CSSStyleSheet

с именем, указанным в атрибуте

title

.

Следующие разделы описывают, какие операции могут выполняться с этими элементами

<style>

и

<link>

и объектами таблиц стилей.

16.6.1. Включение и выключение таблиц стилей

Простейший прием работы с таблицами стилей является к тому же самым переносимым и надежным. Элементы

<style>

и

<link>

и объекты

CSSStyleSheet

определяют свойство

disabled

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

disabled

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

Это наглядно демонстрирует функция

disableStylesheet,

представленная ниже. Если передать ей число, она будет интерпретировать его как индекс в массиве

document.styleSheets

. Если передать ей строку, она будет интерпретировать ее как селектор CSS, передаст ее методу

document.querySelectorAll

(раздел 15.2.5) и установит в значение true свойство

disabled

всех полученных элементов:

function disableStylesheet(ss) {

if (typeof ss === "number")

document.styleSheets[ss].disabled = true;

else {

var sheets = document.querySelectorAll(ss);

for(var і = 0; і < sheets.length; i++) sheets[i].disabled = true;

}

}

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

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