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