HTML DOM свойство classList

Объект элемента HTML DOM

classListЧтение属性 возвращает в реальном времени набор DOMTokenList, представляющий классовые атрибуты элемента.

Свойство classList очень полезно для добавления, удаления и переключения CSS классов на элементе.

Этот атрибут является только чтением, хотя вы можете изменить его с помощью методов add() и remove().

Использование classList - это удобный способ заменить метод, который позволяетclassNameДоступ к списку классов элемента через строку, разделенную пробелами.

Грамматика:

element.classList

var elem = document.getElementById("x");
elem.classList.add("para");

Совместимость браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает свойство classList:

Свойство

Метод

Технические детали

Более примеров

Добавить несколько классов к <p> элементу:

var elem = document.getElementById("x");
elem.classList.add("para", "shadow");

Удалить один класс из <p> элемента:

var elem = document.getElementById("x");
elem.classList.remove("para");

Удалить несколько классов из <p> элемента:

var elem = document.getElementById("x");
elem.classList.remove("para", "shadow");

Переключить класс <p> элемента между двумя классами:

var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");

Вернуть классы, имеющиеся у <p> элемента:

var len = document.getElementById("x").classList.length;

Вернуть классы <p> элемента:

var name = document.getElementById("x").classList;

Вернуть первый класс <p> элемента (индекс 0):

var name = document.getElementById("x").classList[0];

Использовать метод item() для получения первого класса <p> элемента (индекс 0):

var name = document.getElementById("x").classList.item(0);

Найти элемент, имеющий класс "shadow":

var list = document.getElementById("x").classList;
if (list.contains("shadow")) {}}
alert("Yes!!! The P element contains 'shadow' class");
}
alert("No 'shadow' class found");　　　
}

Переключить класс ("open") для создания боковой навигационной кнопки:

Связанные руководства

Учебник CSS:CSS selector

CSS Reference:CSS#idВыборщик

CSS Reference: CSS .class Выборщик

Референс по HTML DOM:Свойство className HTML DOM

Референс по HTML DOM:Метод getElementsByClassName() HTML DOM

Референс по HTML DOM:Метод getElementById() HTML DOM

Референс по HTML DOM:Метод querySelector() HTML DOM

Объект элемента HTML DOM