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

На момент написания этих строк свойство 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) {
   // Убедиться, что с - допустимое имя класса
   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; };