Свойство className
Пример
Задайте класс для элемента <div> с id="myDIV":
document.getElementById("myDIV").className = "mystyle";
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство className задает или возвращает имя класса элемента (значение атрибута class элемента).
Совет: Свойство, аналогичное className, является свойство classList.
Поддержка браузера
Свойство | |||||
---|---|---|---|---|---|
className | Да | Да | Да | Да | Да |
Синтаксис
Возвращает свойство className:
HTMLElementObject.className
Установите свойство className:
HTMLElementObject.className = class
Свойство значений
Значение | Описание |
---|---|
class | Задает имя класса элемента. Чтобы применить несколько классов, разделите их пробелами, например "test demo" |
Технические детали
Возвращает значение | Строка, представляющая класс или разделенный пробелом список классов элемента |
---|
Ещё примеры
Пример
Получите имя класса первого элемента <div> в документе (если таковой имеется):
var x = document.getElementsByTagName("DIV")[0].className;
Попробуйте сами »
Пример
Другие примеры того, как получить имя класса элемента:
var x = document.getElementsByClassName("mystyle")[0].className;
var y = document.getElementById("myDIV").className;
Попробуйте сами »
Пример
Получить имена классов элемента с несколькими классами:
<div id="myDIV" class="mystyle test example">Я являюсь элементом DIV</div>
var x = document.getElementById("myDIV").className;
Попробуйте сами »
Пример
Перезапись существующего имени класса новым:
<div id="myDIV" class="mystyle">Я являюсь элементом DIV</div>
document.getElementById("myDIV").className = "newClassName";
Попробуйте сами »
Пример
Чтобы добавить класс к элементу, не перезаписывая существующие значения, вставьте пробел и новое имя класса:
document.getElementById("myDIV").className += " anotherClass";
Попробуйте сами »
Пример
Если в элементе с идентификатором="медиа" есть класс "мой стиль", измените его размер шрифта:
var x = document.getElementById("myDIV");
if (x.className === "mystyle") {
x.style.fontSize = "30px";
}
Попробуйте сами »
Пример
Переключение между двумя именами классов. В этом примере выполняется поиск класса "mystylequot; в <div>, и если он существует, он будет перезаписан "mystyle2":
function myFunction(){
var x = document.getElementById("myDIV");
// Если "mystyle" существует, перепишите его в "mystyle2"
if (x.className === "mystyle") {
x.className = "mystyle2";
} else {
x.className = "mystyle";
}
}
Попробуйте сами »
Пример
Переключение между названиями классов в разных положениях прокрутки - когда пользователь прокручивает вниз на 50 пикселей сверху, название класса "test" будет добавлено к элементу (и удалено при повторной прокрутке вверх).
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 50) {
document.getElementById("myP").className = "test";
} else {
document.getElementById("myP").className = "";
}
}
Попробуйте сами »
Связанные страницы
CSS Учебник: CSS Синтаксис
CSS Справочник: CSS .class Селектор
HTML DOM Справочник: HTML DOM classList Свойство
HTML DOM Справочник: HTML DOM getElementsByClassName() Метод
HTML DOM Справочник: HTML DOM Объект стиля
❮ Объект элемента