Element.classList

Описание

Свойство classList возвращает псевдомассив DOMTokenList, содержащий все классы элемента.

У classList есть примитивная альтернатива - свойство className, которое содержит значение атрибута class элемента.

 

Синтаксис

var elementClasses = elem.classList;
  • Результат - псевдомассив DOMTokenList, содержащий все классы узла elem

 

Методы

ClassList является геттером. Возвращаемый им объект имеет несколько методов:

     add( String [,String] )    
   Добавляет элементу указанные классы
     remove( String [,String] )
    Удаляет у элемента указанные классы
item ( Number )
    Результат аналогичен вызову сlassList[Number]
toggle ( String [, Boolean])
    Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.
    Если вторым параметром передан undefined или переменная с typeof == 'undefined', поведение будет аналогичным передаче только первого параметра при вызове toggle.
contains ( String )
    Проверяет, есть ли данный класс у элемента (вернет true или false)

И, конечно же, у ClassList есть заветное свойство length, которое возвращает количество классов у элемента.

 

Примеры

<div id="clock" class="example for you"> </div>
var elem = document.querySelector("#clock")

//Выведем классы
console.log(elem.classList); //DOMTokenList ["example", "for", "you"]

//Добавим классы
elem.classList.add("ok", "understand");
console.log(elem.classList); //DOMTokenList ["example", "for", "you", "ok", "understand"]

//Переключим классы
elem.classList.toggle("you");
elem.classList.toggle("he");
console.log(elem.classList); //DOMTokenList ["example", "for", "ok", "understand", "he"]

//Проверим класс
console.log(elem.classList.contains("example")); //true
console.log(elem.classList.contains("lol")); //false

//И удалим классы
elem.classList.remove("example", "for", "understand", "he");
console.log(elem.classList); //DOMTokenList ["ok"]

 

В Firefox 25- в методах add, remove и toggle возможно указать только один аргумент. Смотрите: https://bugzilla.mozilla.org/show_bug.cgi?id=814014 

Полифилл

// Источник: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function() {
    // helpers
    var regExp = function(name) {
        return new RegExp('(^| )'+ name +'( |$)');
    };
    var forEach = function(list, fn, scope) {
        for (var i = 0; i < list.length; i++) {
            fn.call(scope, list[i]);
        }
    };

    // class list object with basic methods
    function ClassList(element) {
        this.element = element;
    }

    ClassList.prototype = {
        add: function() {
            forEach(arguments, function(name) {
                if (!this.contains(name)) {
                    this.element.className += ' '+ name;
                }
            }, this);
        },
        remove: function() {
            forEach(arguments, function(name) {
                this.element.className =
                    this.element.className.replace(regExp(name), '');
            }, this);
        },
        toggle: function(name) {
            return this.contains(name) 
                ? (this.remove(name), false) : (this.add(name), true);
        },
        contains: function(name) {
            return regExp(name).test(this.element.className);
        },
        // bonus..
        replace: function(oldName, newName) {
            this.remove(oldName), this.add(newName);
        }
    };

    // IE8/9, Safari
    if (!('classList' in Element.prototype)) {
        Object.defineProperty(Element.prototype, 'classList', {
            get: function() {
                return new ClassList(this);
            }
        });
    }

    // replace() support for others
    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
        DOMTokenList.prototype.replace = ClassList.prototype.replace;
    }
})();

 

Поддержка браузерами

 

Особенность Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 8.0 3.6 (1.9.2) 10 11.50 5.1
Баг WebKit 20709
toggle method's second argument 24 24 (24) not supported 15 yes
Баг WebKit 99375

 

Особенность Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 3.0 1.0 (1.9.2) 10 11.10 5.0
toggle method's second argument ? 24.0 (24) ? ? ?

 

Спецификация

Смотрите также

Метки документа и участники

 Внесли вклад в эту страницу: Bargamut, karataev, In4in, r3b-fish, rodweb
 Обновлялась последний раз: Bargamut,