DOMTokenList: метод toggle()

Метод toggle() интерфейса DOMTokenList удаляет существующий токен из списка и возвращает false. Если токен не существует, он добавляется, а функция возвращает true.

token

Строка, представляющая токен, который нужно переключить.

force Необязательно

Если указано, переключение выполняется в одностороннем порядке. Если установлено в значение false, то token только будет удален, но не добавлен. Если установлено в значение true, то token только будет добавлен, но не удален.

Булево значение, true или false, указывающее, содержится ли token в списке после вызова или нет.

В следующем примере мы получаем список классов, установленных на элементе <span> как DOMTokenList с помощью Element.classList. Затем мы заменяем токен в списке и записываем список в Node.textContent элемента <span>.

Сначала HTML:

<span class="a b">classList is 'a b'</span>

Теперь JavaScript:

const span = document.querySelector("span");
const classes = span.classList;

span.addEventListener("click", () => {
  const result = classes.toggle("c");
  span.textContent = `'c' ${
    result ? "added" : "removed"
  }; classList is now "${classes}".`;
});

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

Второй параметр может использоваться для определения включения или выключения класса. В этом примере класс 'c' будет включен только если ширина окна браузера превышает 1000 пикселей:

span.classList.toggle("c", window.innerWidth > 1000);