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, де ви можете динамічно додавати та видаляти класи для створення плавних переходів між станами елементів.
Порада:	Пам'ятайте, що `classList` це об'єкт, тому ви можете використовувати його в будь-яких контекстах, де потрібно працювати з властивостями об'єкта.
Порада:	Використовуйте `classList` для перевірки наявності конкретного класу в елементі. Метод `contains` поверне `true`, якщо клас присутній, і `false`, якщо відсутній. Наприклад: `element.classList.contains('className')`.

Синтаксис

Element.classList

Значення

Return

Переглядачі

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

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

Переглядач
	-	-

Приклади

Цей приклад демонструє використання властивості classList для маніпулювання класами елемента. На сторінці є div з класом box red, який спочатку відображається червоним кольором. При натисканні на кнопку "Переключити клас" скрипт додає або видаляє клас blue для цього div за допомогою методу toggle() властивості classList. Це змінює колір div на синій або повертає його до червоного, візуально демонструючи додавання/видалення класу.

Користувач може взаємодіяти зі сторінкою, клікаючи на кнопку і спостерігаючи, як змінюється колір div. Це дозволяє зрозуміти функціонування властивості classList та її методів для маніпуляцій з класами елементів.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/VwNeGeM">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використали властивість classList для додавання класу "highlight" та видалення класу "inactive" з елемента. Це дозволяє змінювати візуальне відображення елементів на сторінці в залежності від дій користувача чи стану програми.

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

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

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

У цьому прикладі ми використали властивість classList для перевірки наявності класу "active" на елементі. Якщо клас вже присутній, ми його видаляємо; якщо немає - додаємо. Це дозволяє легко змінювати стиль елементів залежно від стану програми або дій користувача.

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

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

JS довідник

JavaScript

Наповнення JS розділу