Изменение CSS классов с помощью classList — DOM в JavaScript

В этом уроке вы научитесь использовать свойство JavaScript classList для управления CSS классами у HTML элементов. Мы научимся добавлять, удалять, тогглить (включать и выключать) классы. Напишем условные проверки: содержит ли данный HTML элемент такой-то класс. Именно эти навыки вам понадобятся для написания простой логики на фронтенде.

Что такое свойство classList?

ClassList — это свойство HTML элемента, которое возвращает коллекцию CSS классов. У ClassList есть методы для манипуляций CSS классами, такие как .add(), .remove() и .toggle()

Давайте рассмотрим на примере простой ссылки с классами:

<a href="me.html" class="btn link visible" id="link_1">

let linkClasses = document.querySelector('#link_1');
console.log(linkClasses.classList);

Давайте теперь разбираться, что же умеет ClassList и как нам это может пригодится.

Свойство ClassList имеет несколько методов, например:

• .add(): добавляет класс к элементу HTML
• .remove(): удаляет указанные классы из HTML элемента
• .contains(): проверяет, есть ли указанный класс у HTML элемента
• .toggle(): включает и выключает (тогглит) указанный класс

Давайте разберёмся на коротких примерах как это работает

Add добавить класс к элементу

В этом примере мы добавим нашей ссылке ещё два класса active и green. HTML остаётся прежним, по этому тут я привожу только JavaScript код:

let linkClasses = document.querySelector('#link_1');
linkClasses.classList.add('active','green');

Попробуйте сами и посмотрите что получится

Remove удалить класс у HTML элемента

Аналогичным образом работает свойство remove вы просто указываете список классов которые нужно убрать у элемента. Давайте уберём класс visible у нашей ссылки

let linkClasses = document.querySelector('#link_1');
linkClasses.classList.remove('visible');

Если вам нужно удалить несколько классов используйте синтаксис из примера add

linkClasses.classList.remove('visible', 'active');

Contains проверить есть ли указанные классы у элемента

Метод .contains() выполняет проверку, есть ли у нашего элемента интересующий нас класс или нет. Возвращает значения true и false

linkClasses.classList.contains('active');

Давайте сделаем более подробный пример с использованием if/else операторов:

let linkClasses = document.querySelector('#link_1');

if ( linkClasses.classList.contains('active') ) {
   console.log('Содержит .active');
} else {
   console.log('Не содержит .active');
}

Попробуйте сами и посмотрите что у вас появится в консоле, не забывайте скопировать HTML из начала урока.

Toggle переключатель класса

Метод .toggle() чаще всего используется на практике, например для выпадающих меню. Он позволяет сократить пример выше всего до одной строки вместо 6-ти. Этот метод сам проверяет, есть ли указанный выше класс у HTML элемента, и если его нет, то он добавляется, если же такой класс уже есть, то он напротив удаляется. Вот как выглядит эта запись:

linkClasses.classList.toggle('visible');

Давайте напишем маленький пример тогглера для переключения цвета у HTML элемента на чистом JavaScript

Для начала HTML разметка:

<span class="toggle">
  togg 1
</span>

<span class="toggle">
  togg 2
</span>

<span class="toggle">
  togg 3
</span>

Немного CSS для наглядности

.toggle {
  color: red ;
}

.toggle.visible {
  color: green;
}

Ну и собственно наш тогглер на JavaScript. Да, я в начале урока обещал показать как работать с несколькими элементами через for

// Получаем все объекты с классом .toggle
var elements = document.getElementsByClassName("toggle");

// Создаём фунуцию с тогглером
var viToggler = function() {
    var classes = this.classList;
    classes.toggle("visible");
};

// Слушаем все объекты с классом .toggle на предмет клика
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', viToggler, false);
}

Рабочий пример кода: