JavaScript свойство Element.className

Определение и применение

JavaScript свойство className объекта Element задает значение атрибута class, или возвращает строковое значение этого атрибута, содержащее класс, или классы текущего элемента, разделенные пробелами.

Свойство className также может быть экземпляром SVGAnimatedString, если элемент является элементом SVG (SVGElement). Лучше получить / установить имя класса элемента с помощью метода getAttribute() и setAttribute() объекта Element, если вы имеете дело с элементами SVG. Однако учтите, что метод getAttribute() возвращает null вместо "", если атрибут класса отсутствует. Для существующего пустого атрибута возвращается пустая строка.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Element.className

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
className	✓22…	✓12	✓1	✓8	✓1	✓25…	✓4	✓10.1	✓1	✓1.5…	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

JavaScript синтаксис

// получение классов элемента
const className = element.className;

// установка классов элемента
element.className = someClassName;

Спецификация

DOM Standard.

Пример использования

Замена строки классов элемента

Нажмите ▶: класс active будет заменён на inactive, а в консоли появится разметка элемента с новым значением атрибута class. Повторный запуск восстановит исходную разметку и повторит ту же замену.

index.html

HTML

<div id="myElem" class="active" title="Пример">Элемент примера</div>

main.js

JavaScript

// инициализируем переменные
const elem = document.getElementById('myElem') // находим определенный элемент по id

if (elem.className === 'active') {
    // проверяем имеет ли элемент определенный класс
    elem.className = 'inactive' // устанавливаем класс элементу
} else {
    elem.className = 'active' // устанавливаем класс элементу
}

console.log(document.getElementById('myElem').outerHTML)

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}