Свойство className
Пример element.className
Установите атрибут класса для элемента:
element.className = "myStyle";
Попробуйте сами »
Получите атрибут класса "myDIV":
let value = document.getElementById("myDIV").className;
Попробуйте сами »
Переключение между двумя именами классов:
if (element.className == "myStyle") {
element.className = "newStyle";
} else {
element.className = "myStyle";
}
Попробуйте сами »
Ещё примеры ниже.
Описание className
Свойство className устанавливает или возвращает атрибут класса элемента.
Похожи на className
Синтаксис className
Верните свойство className:
HTMLElementObject.className
Задайте свойство className:
HTMLElementObject.className = class
Значения свойств className
| Значение | Описание |
|---|---|
| class |
Имя(я) класса(ов) элемента. Разделяйте несколько классов пробелами, например «test demo». |
Возвращаемое значение className
| Тип | Описание |
|---|---|
| String | Класс или список классов элемента, разделенный пробелами. |
Ещё примеры className
Получить атрибут класса первого элемента <div> (если есть):
let value = document.getElementsByTagName("div")[0].className;
Попробуйте сами »
Получите атрибут класса с несколькими классами:
<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;
Попробуйте сами »
Перезаписать существующий атрибут класса новым:
element.className = "newClassName";
Попробуйте сами »
Чтобы добавить новые классы, не перезаписывая существующие значения, добавьте пробел и новые классы:
element.className += " class1 class2";
Попробуйте сами »
Если у "myDIV" есть класс "myStyle", измените размер шрифта:
const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
elem.style.fontSize = "30px";
}
Попробуйте сами »
Если прокрутить страницу на 50 пикселей сверху, будет добавлен класс "test":
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Попробуйте сами »
Поддержка браузера className
element.className поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | Да |