Свойство className в JavaScript

В этом руководстве вы узнаете, как использовать свойство JavaScript className для управления классами CSS элемента.

className является свойством элемента. Он возвращает разделенный пробелами список классов CSS элемента:

element.className

Предположим, что у вас есть следующий элемент ul :

<ul id="menu" class="vertical main">
   <li>Homepage</li>
   <li>Services</li>
   <li>About</li>
   <li>Contact</li>
</ul>

Следующий код показывает классы элемента ul в окне консоли:

let menu = document.querySelector('#menu');
console.log(menu.className);

Выход:

vertical main

Чтобы установить класс для элемента, используйте следующий код:

element.className += newClassName;

Оператор += добавляет newClassName в существующий список классов элемента.

Чтобы полностью перезаписать все классы элемента, используйте простой оператор присваивания. Например:

element.className = "class1 class2";

Чтобы получить полный список классов элемента, вам просто нужно получить доступ к свойству className :

let classes = element.className;

Поскольку class является ключевым словом в JavaScript, вместо class используется имя className.

Также class является атрибутом HTML:

<div id="note" class="info yellow-bg red-text">JS className</div>

в то время как className является свойством DOM элемента:

let note = document.querySelector('#note');
console.log(note.className);

Выход:

info yellow-bg red-text

У элемента есть еще одно свойство, которое помогает вам лучше манипулировать его классами CSS, называемое classList.