пример
Установите класс для <div> элемент с идентификатором = «myDIV»:
document.getElementById("myDIV").className = "mystyle"; Попробуй сам " Больше "Try it Yourself" примеры ниже.
Определение и использование
Множества свойства Classname или возвращают имя класса элемента (значение атрибута класса Элемента в).
Совет: Аналогичное свойство Classname является ClassList собственности.
Поддержка браузеров
| Имущество | |||||
|---|---|---|---|---|---|
| className | да | да | да | да | да |
Синтаксис
Возвращает свойство Classname:
HTMLElementObject .classNameУстановите свойство Classname:
HTMLElementObject .className= class Значения свойств
| Стоимость | Описание |
|---|---|
| class | Задает имя класса элемента. Чтобы применить несколько классов, разделив их пробелами, как "test demo" |
Технические подробности
| Возвращаемое значение: | Строка, представляющая класс, или разделенный пробелами список классов, элемента |
|---|
Еще примеры
пример
Получить имя класса первого <div> элемент в документе (if any) :
var x = document.getElementsByTagName("DIV")[0].className; В результате х будет:
mystyle Попробуй сам " пример
Другие примеры о том, как получить имя класса элемента:
var x = document.getElementsByClassName("mystyle")[0].className;
var y =
document.getElementById("myDIV").className; Попробуй сам " пример
Получить имя класса элемента с несколькими классами:
<div id="myDIV" class="mystyle test example">I am a DIV element</div>
var x = document.getElementById("myDIV").className;В результате х будет:
mystyle text example Попробуй сам " пример
Перезапись имя существующего класса с новым:
<div id="myDIV" class="mystyle">I am a DIV element</div>
document.getElementById("myDIV").className = "newClassName"; Попробуй сам " пример
Для того, чтобы добавить класс к элементу, без перезаписи существующих значений, вставьте пробел и новое имя класса:
document.getElementById("myDIV").className += " anotherClass"; Попробуй сам " пример
Если есть класс "mystyle" в элементе с идентификатором = «myDIV», измените размер шрифта:
var x = document.getElementById("myDIV");
if (x.className ===
"mystyle") {
x.style.fontSize = "30px";
} Попробуй сам " пример
Переключение между именами классов на разных позициях прокрутки - Когда пользователь прокручивает вниз 50 пикселей от верхней части, имя класса "test" будет добавлен к элементу (and removed when scrolled up again) .
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
}
else {
document.getElementById("myP").className
= "";
}
}
Попробуй сам " Похожие страницы
Учебник CSS: CSS селекторы
CSS Reference: CSS .class Selector
HTML DOM Ссылка: HTML DOM classList Property
HTML DOM Ссылка: HTML DOM getElementsByClassName() Метод
HTML DOM Ссылка: HTML DOM Style Object
<Элемент объекта