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

Флэнаган Дэвид
Шрифт:

// Убедиться, что с - допустимое имя класса

if (с.length === 0 || c.indexOf(" ") != -1)

throw new Error("Недопустимое имя класса: + с + .....);

// Удалить все вхождения имени с как слова и все завершающие пробелы

var pattern = new RegExp("\\b" + с + '\\b\\s*'\ "g");

this.e.className = this.e.className.replace(pattern, "");

};

// Добавляет имя с в e.className, если оно отсутствует в списке, и возвращает true.

// Иначе удаляет все вхождения имени с из e.className и возвращает false.

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;

}