JS Toggle Class - Изменение стилей элементов в HTML странице

JS toggle class - это метод, который позволяет добавить или удалить класс у элемента по нажатию на кнопку или другое событие. Toggle class может применяться для любого HTML-элемента, но чаще всего используется для кнопок, меню и других элементов управления интерфейсом.

Пример кода:

HTML:

html
Toggle class

CSS:

css
.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}
.box.active {
  background-color: blue;
}

JS:

javascript
const toggleBtn = document.getElementById('toggle-btn');
const box = document.querySelector('.box');
toggleBtn.addEventListener('click', () => {
  box.classList.toggle('active');
});

В данном примере есть кнопка "Toggle class" и элемент-коробка с классом "box". При нажатии на кнопку с помощью метода toggle() будет добавляться или удаляться класс "active" у элемента "box". В зависимости от того, имеет ли элемент этот класс или нет, фон квадрата будет меняться на синий или серый цвет.

Метод toggle() имеет следующие параметры:

• class - класс, который нужно добавить или удалить
• force - булевое значение, которое указывает, нужно ли явно добавить или удалить класс. Если значение true, то класс будет добавлен, если false - удален.

Таким образом, использование метода toggle() позволяет быстро и удобно изменять стили элементов при взаимодействии пользователя с интерфейсом, повышая удобство использования сайта или приложения.