classList.toggle() в JavaScript

Метод classList.toggle() переключает CSS-класс DOM-элемента. Если класса нет, метод добавит его. Если класс уже есть, метод удалит его.

• Переключение класса
• Второй аргумент
• Итого

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

<button class="menu-button">Меню</button>

const menuButton = document.querySelector('.menu-button');

const isOpen = menuButton.classList.toggle('is-open');

В этом примере у кнопки не было класса is-open, поэтому он будет добавлен, а переменная isOpen получит значение true. При следующем вызове класс удалится, а метод вернёт false.

Синтаксис метода: element.classList.toggle(‘имя-класса’).

Второй аргумент

Вторым аргументом можно явно задать нужное состояние класса.

menuButton.classList.toggle('is-open', true); // добавить класс
menuButton.classList.toggle('is-open', false); // удалить класс

Если передать true, класс будет у элемента. Если передать false, класс будет удалён. Такой вариант удобен, когда нужное состояние уже известно. Для обычного добавления или удаления также можно использовать classList.add() и classList.remove().

Второй аргумент - не второй CSS-класс, а булево значение true или false.

Итого

classList.toggle() меняет наличие класса и возвращает его состояние после вызова. Без второго аргумента метод переключает класс, а с true или false задаёт его состояние явно.