Как переключать классы

Использование JavaScript для добавления и удаления классов между элементами.

Нажмите кнопку, чтобы переключить имя класса!

Переключение классов

Шаг 1 - Добавление HTML：

Перед добавлением класса к id="myDIV" Переключение классов между элементами div (в этом примере мы используем кнопку для переключения классов).

<button onclick="myFunction()">Попробуйте</button>
<div id="myDIV">
  Это элемент DIV.
</div>

Шаг 2 - Добавление CSS：

Добавьте имя класса для переключения：

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
}

Шаг 3 - Добавление JavaScript：

Получение id="myDIV" Элемент <div> и в "mystyle" Переключение классов между:

function myFunction() {
  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");
}

Попробуйте сами

Соответствующие страницы

Учебное пособие：Как добавить класс

Учебное пособие：Как удалить класс

Руководство:Атрибут classList HTML DOM Element