Как сделать - Переключатель класса
Узнать, как создать переключение между добавлением и удалением имени класса из элемента с помощью JavaScript.
Переключить Класс
Шаг 1) Добавить HTML:
Переключение между добавлением имени класса к элементу div с id="myDIV" (в этом примере мы используем кнопку для переключения имени класса).
Пример
<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:
Получите элемент <div> с id="myDIV" и переключитесь между классом "mystyle:
Пример
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
Редактор кода »
Кросс-браузерное решение
Примечание: Свойство classList не поддерживается в Internet Explorer 9. В следующем примере используется кросс-браузерное решение / резервный код для IE9:
Пример
var element = document.getElementById("myDIV");
if (element.classList) {
element.classList.toggle("mystyle");
} else {
// Для IE9
var classes = element.className.split(" ");
var i = classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
element.className = classes.join(" ");
}
Редактор кода »
Совет: Также смотрите Как добавить класс.
Совет: Также смотрите Как удалить класс.
Совет: Узнайте больше о программе свойство classList в нашей ссылке JavaScript.