Есть желание присоединиться к интересным IT проектам? Смотри открытые вакансии.

JavaScript свойство Element.classList

JavaScript Element

Определение и применение

JavaScript свойство classList объекта Element является свойством только для чтения, которое возвращает живую коллекцию DOMTokenList, содержащую значение глобального атрибута class (классы элемента).


Обращаю Ваше внимание на то, что использование свойства classList является удобной альтернативой доступа к списку классов элемента в виде строки с пробелами через свойство Element.className.


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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
classListДаДаДаДа10.0*Да

JavaScript синтаксис:

const elementClassList = element.classList;

Если глобальный атрибут class не был установлен или является пустым, то elementClassList.length возвращает значение 0.

Версия JavaScript

Document Object Model (DOM) Level 1

Методы объекта DOMTokenList

Возвращаемый свойством classList объект DOMTokenList имеет следующие методы:

Синтаксис методаОписание
add( val );
add( val, val, ...val );

val - String
Добавляет указанные значения класса. Если указанные классы уже существуют в атрибуте class элемента, то они игнорируются.
remove( val );
remove( val, val, ...val );

val - String
Удаляет указанные значения класса. Удаление класса, который не существует, не вызывает ошибки.
item( val );

val - Number
Возвращает значение класса по индексу в коллекции. Результат аналогичен вызову сlassList[Number].
toggle( val );
toggle( val, force );

val - String
force - Boolean
Когда присутствует только один аргумент переключает значение класса (если класс существует, то удаляет его и возвращает false, если нет, то добавит его и вернет true. Если второй аргумент имеет значение true, то указанное значение класса будет добавлено, а если значение false, удалено.
contains( val );
val - String
Проверяет, существует ли указанное значение класса в атрибуте class элемента.
replace( oldClass, newClass );

oldClass - String
newClass - String
Производит замену существующего класса новым классом.

Пример использования

<div id = "myElem" class = "class1 class2 class3"></div>

// находим наш элемент в документе и инициализируем переменную этим значением
const myElem = document.querySelector("#myElem")

// выведем количество элементов в коллекции
console.log(myElem.classList.length); // 3

// выведем классы
console.log(myElem.classList); // ["class1", "class2", "class3", value: "class1 class2 class3"]

// добавим классы
myElem.classList.add("class4", "class5");
console.log(myElem.classList); // ["class1", "class2", "class3", "class4", "class5", value: "class1 class2 class3 class4 class5"]

// переключим классы
myElem.classList.toggle("class1"); // false
myElem.classList.toggle("class6"); // true
console.log(myElem.classList); // ["class2", "class3", "class4", "class5", "class6", value: "class2 class3 class4 class5 class6"]

// проверим наличие класса
console.log(myElem.classList.contains("class1")); // false
console.log(myElem.classList.contains("class6")); // true

// удалим классы
myElem.classList.remove("class2", "class3", "class4");
console.log(myElem.classList); // ["class5", "class6", value: "class5 class6"]

JavaScript Element
×

Кажется, вы используете блокировщик рекламы :(

Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.

Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.