JavaScript classList

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

Введение в свойство JavaScript classList

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

const classes = element.classList;
Code language: JavaScript (javascript)

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

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

Примеры JavaScript classList

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

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

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

<div id="content" class="main red">JavaScript classList</div>   
Code language: HTML, XML (xml)

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

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

Output:

main
red

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

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

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

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

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

let div = document.querySelector('#content');
div.classList.add('info');
Code language: JavaScript (javascript)

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

let div = document.querySelector('#content');
div.classList.add('info','visible','block');
Code language: JavaScript (javascript)

3) Удалить классы элемента

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

let div = document.querySelector('#content');
div.classList.remove('visible');
Code language: JavaScript (javascript)

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

let div = document.querySelector('#content');
div.classList.remove('block','red');
Code language: JavaScript (javascript)

4) Заменить класс элемента

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

let div = document.querySelector('#content');
div.classList.replace('info','warning');
Code language: JavaScript (javascript)

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

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

let div = document.querySelector('#content');
div.classList.contains('warning'); // true
Code language: JavaScript (javascript)

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

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

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

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

let div = document.querySelector('#content');
div.classList.toggle('visible');
Code language: JavaScript (javascript)

Резюме

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