Шрифт:
На момент написания этих строк свойство
classList
не поддерживалось ни одним из текущих броузеров. Однако эту удобную функциональность легко можно реализовать самому, как показано в примере 16.5. Подобная реализация, позволяющая интерпретировать атрибут class
элемента как множество имен классов, существенно упрощает выполнение многих задач, связанных с обработкой CSS. Пример 16.5. classList: интерпретирует className, как множество CSS-классов
//
* Возвращает свойство classList элемента е. если оно содержит один класс.
* Иначе возвращает объект, имитирующий интерфейс DOMTokenList.
* Возвращаемый объект имеет методы contains, add, remove, toggle и toString,
* позволяющие проверять и изменять набор классов элемента е. Если свойство classList
* имеет встроенную поддержку в броузере, функция возвращает объект, подобный массиву,
* который имеет свойство length и поддерживает возможность индексирования массива.
* Имитация объекта DOMTokenList не подобна массиву, но имеет метод toArray.
* который возвращает истинный массив имен классов элемента.
*/
function classList(e) {
if (е.classList) return e.classList; // Вернуть e.classList, если имеется
else return new CSSClassList(e); // Иначе попытаться подделать его
}
// CSSClassList - класс JavaScript, имитирующий объект DOMTokenList
function CSSClassList(e) { this.e = e; }
// Возвращает true, если e.className содержит класс с, иначе - false
CSSClassList.prototype.contains = function(c) {
// Проверить, является ли с допустимым именем класса
if (с.length === 0 || c.indexOf(" ") != -1)
throw new Error("Недопустимое имя класса: + с + .....);
// Сначала проверить общие случаи
var classes = this.e.className;
if (!classes) return false; // e вообще не имеет классов
if (classes === c) return true; // e имеет единственный класс,
// имя которого точно совпадает с искомым
// Иначе использовать RegExp для поиска с как отдельного слова
// \b - в регулярных выражениях соответствует границе слова,
return classes.search(”\\b" + с + "\\b") != -1;
};
// Добавляет имя класса с в е.className, если оно отсутствует в списке
CSSClassList.prototype.add = function(c) {
if (this.contains(c)) return; // Ничего не делать, если имя уже в списке
var classes = this.e.className;
if (classes && classes[classes.length-1] != " ")
c = " " + с; // Добавить пробел, если необходим
this.е.className += с; // Добавить имя с в className
};
// Удаляет все вхождения с из е.className
CSSClassList.prototype.remove = function(c) {