JS властивість Element.className

Загальний опис

Властивість className у JavaScript представляє собою рядок, який містить імена класів елемента DOM. Ця властивість дозволяє отримувати доступ до класів елемента або змінювати їх, встановлюючи нові значення для класу. Використання className може бути корисним для зміни стилів елементів або керування їх поведінкою на сторінці. На практиці, className широко використовується для динамічної зміни стилів елементів, забезпечення інтерактивності веб-сторінок та керування їх зовнішнім виглядом.

Почнемо з основних операцій з властивістю className. Для отримання рядка з іменами класів елемента достатньо просто звернутися до властивості className:

var element = document.getElementById('myElement');
var classNames = element.className;

Тепер classNames містить рядок з іменами класів, що присутні на елементі з ідентифікатором 'myElement'.

Щоб змінити класи елемента, просто присвоюємо нове значення властивості className:

element.className = 'newClass';

У цьому прикладі, рядок 'newClass' стане новим значенням властивості className.

Додавання чи видалення окремих класів виконується шляхом зміни значення className за допомогою строкових операцій JavaScript або застосування методів add() та remove() з використанням classList:

// Додавання класу
element.className += ' additionalClass';

// Видалення класу
element.className = element.className.replace('oldClass', '');

Також можна використовувати регулярні вирази для більш гнучкого керування класами:

// Видалення всіх класів, крім одного
element.className = element.className.replace(/(?:^|\s)active(?!\S)/g, '');

Це лише декілька прикладів того, як можна використовувати властивість className для керування класами елементів у DOM. Вона надає можливість динамічно змінювати зовнішній вигляд та поведінку елементів на сторінці, що дозволяє створювати більш динамічні та інтерактивні веб-додатки.

правити

Порада

Використовуйте className для створення анімацій або переходів за допомогою CSS. Контролюйте зміну класів за допомогою JavaScript для створення плавних та ефектних змін у вигляді веб-елементів.

автор: Bond правити

Порада

Пам'ятайте, що присвоєння значення className видаляє всі інші класи. Використовуйте classList для додавання або видалення окремих класів без зміни інших.

автор: Bond правити

Порада

Уникайте прямого змінювання className у скриптах, якщо існують інші способи, такі як використання classList, які забезпечують більшу гнучкість та безпеку.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.className

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	22	1	1	8	12	5

Підтримка: мобільні переглядачі

Переглядач
	4.4	25	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="exampleElement">Демонстраційний елемент</div>

// Отримуємо посилання на елемент з ідентифікатором "exampleElement".
const element = document.getElementById("exampleElement");

// Додаємо клас "highlight" до класів елемента.
element.className += " highlight";

// Видаляємо клас "inactive" з класів елемента.
element.className = element.className.replace("inactive", "");

<div id="exampleElement">Демонстраційний елемент</div>

// Отримуємо посилання на елемент з ідентифікатором "exampleElement".
const element = document.getElementById("exampleElement");

// Перевіряємо чи містить список класів елемента клас "active".
if (element.className.includes("active")) {
    // Якщо так, видаляємо його.
    element.className = element.className.replace("active", "");
} else {
    // Якщо ні, додаємо його.
    element.className += " active";
}