Element.classList

Описание

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

Синтаксис

var elementClasses = elem.classList;

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

Методы

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

     add( String [,String] )    

   Добавляет элементу указанные классы

     remove( String [,String] )

    Удаляет у элемента указанные классы

item ( Number )
    Результат аналогичен вызову сlassList[Number]

toggle ( String [, Boolean])
    Если класс у элемента отсутствует - добавляет, иначе - убирает. Когда вторым параметром передано false - удаляет указанный класс, а если true - добавляет.

contains ( String )
    Проверяет, есть ли данный класс у элемента (вернет true или false)

Примеры

<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"]

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

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

• https://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#dom-classlist
• https://dom.spec.whatwg.org/#interface-domtokenlist

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

• element.className