JavaScript с нуля

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

Для многих сценариев стилизации применяется стандартный рабочий процесс. Во-первых, мы проверяем, существует ли значение класса в элементе. Если да, мы удаляем его из элемента. Если же нет, то мы, наоборот, его добавляем. Чтобы упростить этот тривиальный шаблон переключения, API classList предоставляет метод toggle:

let divElement = document.querySelector("#myDiv");

divElement.classList.toggle("foo"); // удаляет foo

divElement.classList.toggle("foo"); // добавляет foo

divElement.classList.toggle("foo"); // удаляет foo

console.log(divElement.classList);

Метод toggle при каждом вызове добавляет указанное значение класса в элемент или удаляет его. В нашем случае класс foo при первом вызове метода toggle удаляется. Во второй раз класс foo, наоборот, добавляется. В третий раз снова удаляется. Думаю, суть вы уловили.