Как сделать - Переключить класс
Переключение между добавлением и удалением имени класса из элемента с помощью JavaScript.
Нажмите кнопку, чтобы переключить имя класса!
Переключить класс
Шаг 1) Добавьте HTML:
Переключение между добавлением имени класса в элемент div с помощью id="myDIV" (в этом примере мы используем кнопку для переключения имени класса).
Пример
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</div>
Шаг 2) Добавьте CSS:
Добавьте имя класса для переключения:
Пример
.mystyle {
width: 100%;
padding:
25px;
background-color: coral;
color: white;
font-size: 25px;
}
Шаг 3) Добавьте JavaScript:
Получите элемент <div> с id="myDIV" и переключитесь между классом "mystyle":
Пример
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Совет: См. также Как добавить класс .
Совет: См. также Как удалить класс .
Совет: Узнайте больше о свойстве classList в нашем Справочнике по JavaScript.