АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
194 of 264 menu
НОВИНКА: Практика на Реальных Проектах и Работы в Портфолио. Бесплатный курс! Жми для записи!

Метод toggle объекта classList

Метод toggle объекта classList чередует заданный CSS класс элемента: добавляет класс, если его нет и удаляет, если есть.

Синтаксис

элемент.classList.toggle(класс);

Пример

В данном примере при использовании метода toggle класс zzz удалится, так как он уже есть в элементе:

<p id="elem" class="www ggg zzz"></p> let elem = document.querySelector('#elem'); elem.classList.toggle('zzz');

Результат выполнения кода:

<p id="elem" class="www ggg"></p>

Пример

В данном примере при использовании метода toggle класс zzz добавится, так как его нету в элементе:

<p id="elem" class="www ggg"></p> let elem = document.querySelector('#elem'); elem.classList.toggle('zzz');

Результат выполнения кода:

<p id="elem" class="www ggg zzz"></p>

Смотрите также

  • метод classList.add,
    который добавляет заданный класс
  • метод classList.remove,
    который удаляет заданный класс
  • метод classList.contains,
    который проверяет заданный класс
enru