Как сделать - Добавить имя класса
Узнать, как добавить имя класса к элементу с помощью 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.add("mystyle");
}
Редактор кода »
Кросс-браузерное решение
Примечание: Свойство classList не поддерживается в Internet Explorer 9. Следующий код будет работать во всех браузерах:
Пример
function myFunction() {
var element, name, arr;
element = document.getElementById("myDIV");
name = "mystyle";
arr = element.className.split(" ");
if (arr.indexOf(name) == -1) {
element.className += " " + name;
}
}
Редактор кода »
Совет: Также смотреть Как переключить класс.
Совет: Также смотреть Как удалить класс.
Совет: Узнать больше о свойстве в нашем classList JavaScript Справочнике.
Совет: Узнать больше о свойстве в нашем className JavaScript Справочнике.