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

CSSClassList.prototype.toggle = function(c) {

 if (this.contains(c)) { // Если e.className содержит c

 this.remove(c); // удалить его.

 return false;

 }

 else { // Иначе:

 this.add(c); // добавить его.

 return true;

 }

};

// Возвращает само значение e.className

CSSClassList.prototype.toString = function() { return this.e.className; };

// Возвращает имена из e.className 

CSSClassList.prototype.toArray = function() {

 return this.e.className.match(/\b\w+\b/g) || [];

};

16.6. Управление таблицами стилей

До сих пор мы видели, как устанавливать и получать значения CSS-свойств стиля и классы отдельных элементов. Однако существует еще возможность управления самими таблицами стилей CSS. Обычно в этом не возникает необходимости, тем не менее такая возможность иногда бывает полезной, и в этом разделе коротко будут представленные возможные приемы.

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

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