JS властивість Element.classList

Загальний опис

classList - це властивість, яка надає зручний доступ до класів елемента в DOM (Document Object Model). Вона дозволяє додавати, видаляти та перевіряти наявність класів на елементі, що спрощує роботу з CSS класами у JavaScript коді. Існують різні сфери застосування classList у практиці. Наприклад, вона може бути використана для динамічної зміни стилів елементів на сторінці, управління анімаціями чи підсвіткою активних елементів у веб-додатках.

Для початку, розглянемо базові операції з classList. Додавання класу відбувається за допомогою методу add():

var element = document.getElementById('myElement');
element.classList.add('newClass');

У цьому прикладі, клас з назвою 'newClass' буде доданий до списку класів елемента з ідентифікатором 'myElement'.

Видалення класу виконується методом remove():

element.classList.remove('oldClass');

Цей код видаляє клас з іменем 'oldClass' зі списку класів елемента.

Щоб перевірити, чи міститься певний клас у списку класів елемента, можна скористатися методом contains():

if (element.classList.contains('checkClass')) {
    // виконуємо дії, якщо клас присутній
} else {
    // виконуємо дії, якщо клас відсутній
}

Також існує можливість переключення класу - додавання, якщо він відсутній, та видалення, якщо він присутній, за допомогою методу toggle():

element.classList.toggle('active');

Це основні прийоми роботи з властивістю classList. Використання цих методів дозволяє зручно маніпулювати класами елементів у DOM, що спрощує роботу з CSS та динамічним взаємодією на сторінці.

правити

Порада

Розгляньте використання classList у разі потреби анімації CSS, де ви можете динамічно додавати та видаляти класи для створення плавних переходів між станами елементів.

автор: Bond правити

Порада

Використовуйте classList для перевірки наявності конкретного класу в елементі. Метод contains поверне true, якщо клас присутній, і false, якщо відсутній. Наприклад: element.classList.contains('className').

автор: Bond правити

Порада

Пам'ятайте, що classList це об'єкт, тому ви можете використовувати його в будь-яких контекстах, де потрібно працювати з властивостями об'єкта.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.classList

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	22	3.6	7	11.5	16	10*

Підтримка: мобільні переглядачі

Переглядач
	4.4	25	4	7

Приклади

+ запропонувати свій приклад у пісочниці

<div id="exampleElement">Демонстраційний елемент</div>

// Отримуємо посилання на елемент з ідентифікатором "exampleElement".
const element = document.getElementById("exampleElement");

// Додаємо клас "highlight" до списку класів елемента.
element.classList.add("highlight");

// Видаляємо клас "inactive" зі списку класів елемента.
element.classList.remove("inactive");

<div id="exampleElement">Демонстраційний елемент</div>

// Отримуємо посилання на елемент з ідентифікатором "exampleElement".
const element = document.getElementById("exampleElement");

// Перевіряємо чи містить список класів елемента клас "active".
if (element.classList.contains("active")) {
    // Якщо так, видаляємо його.
    element.classList.remove("active");
} else {
    // Якщо ні, додаємо його.
    element.classList.add("active");
}