Classlist Toggle: Mastering CSS Control Over HTML Elements

Метод classList.toggle() позволяет добавлять или удалять класс у элемента HTML при каждом вызове метода. Если класс уже присутствует, то он будет удален, если отсутствует – добавлен.

Синтаксис метода:

element.classList.toggle(class [, force]);

• element – это элемент, который мы хотим изменить.
• class – класс, который мы хотим добавить / удалить у элемента.
• force – необязательный параметр, который может быть использован вместо триггера выбора. Если данный параметр установлен в true, то класс всегда добавляется, иначе – удаляется.

Пример использования:

HTML:

JavaScript:

const myDiv = document.getElementById('myDiv');

myDiv.classList.toggle('active'); // удаляется класс, т.к. он уже есть

myDiv.classList.toggle('inactive'); // добавляется класс, т.к. его нет

В данном примере первый toggler удалит класс 'active', который уже есть у элемента, а второй добавит класс 'inactive', которого еще нет. Класс 'active' будет удален, и т.к. его у нас больше нет, то следующий вызов toggle добавит класс 'inactive'.

Таким образом, метод classList.toggle() очень удобен, когда мы хотим добавить или удалить класс элементу в зависимости от его текущего состояния.