classList в JavaScript: управление свойствами CSS элемента

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

classList — это свойство элемента, доступное только для чтения, которое возвращает живую коллекцию классов CSS:

const classes = element.classList;

classList — это объект DOMTokenList, представляющий содержимое атрибута класса элемента.

Несмотря на то, что данное свойство только для чтения, вы можете манипулировать классами, которые он содержит, используя различные методы.

Примеры

Давайте рассмотрим несколько примеров манипулирования классами CSS элемента через интерфейс classList.

1) Получение классов CSS элемента

Предположим, у вас есть элемент div с двумя классами: main и red.

<div id="content" class="main red">JavaScript classList</div>   

Следующий код отображает список классов элемента div в окне консоли:

let div = document.querySelector('#content');
for(let cssClass of div.classList) {
    console.log(cssClass);
}

Выход:

main
red

Как это работает:

• Сначала выберите элемент div с content id с помощью метода querySelector().
• Затем выполните итерацию по элементам classList и отобразите классы в окне консоли.

2) Добавление одного или нескольких классов в список классов элемента

Чтобы добавить один или несколько классов CSS в список классов элемента, используйте метод add() класса classList.

Например, следующий код добавляет info класс в список классов элемента div с id content :

let div = document.querySelector('#content');
div.classList.add('info');

В следующем примере несколько классов CSS добавляются в список классов элемента:

let div = document.querySelector('#content');
div.classList.add('info','visible','block');

3) Удаление классов элементов

Чтобы удалить класс CSS из списка классов элемента, используйте метод remove() :

let div = document.querySelector('#content');
div.classList.remove('visible');

Как и метод add(), вы можете удалить несколько классов за один раз:

let div = document.querySelector('#content');
div.classList.remove('block','red');

4) Замена класса

Чтобы заменить существующий класс CSS новым, вы используете метод replace() :

let div = document.querySelector('#content');
div.classList.replace('info','warning');

5) Проверка, имеет ли элемент указанный класс

Чтобы проверить, имеет ли элемент указанный класс, вы используете метод contains() :

let div = document.querySelector('#content');
div.classList.contains('warning'); // true

Метод contains() возвращает true, если classList содержит указанный класс; иначе false.

6) Переключение классов

Если список классов элемента содержит указанное имя класса, метод toggle() удаляет его. Если в списке классов нет имени класса, метод toggle() добавляет его в список классов.

В следующем примере используется метод toggle() для переключения visible класса элемента с content id:

let div = document.querySelector('#content');
div.classList.toggle('visible');

Заключение

• Свойство classList в JavaScript элемента возвращает динамическую коллекцию классов CSS элемента.
• Используйте add() и remove() для добавления классов CSS и удаления классов CSS из списка классов элемента.
• Используйте метод replace(), чтобы заменить существующий класс новым.
• contains(), чтобы проверить, содержит ли список классов элемента указанный класс.
• И метод toggle() для переключения класса.