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. Вона надає можливість динамічно змінювати зовнішній вигляд та поведінку елементів на сторінці, що дозволяє створювати більш динамічні та інтерактивні веб-додатки.
| Порада: | Пам'ятайте, що присвоєння значення |
| Порада: | Уникайте прямого змінювання |
| Порада: | Використовуйте |
Синтаксис
Element.classNameЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
22 |
1 |
1 |
8 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
25 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад демонструє використання властивості className для встановлення списку класів елемента. На сторінці є div з класом box red, який спочатку відображається червоним кольором. Користувач може ввести список класів, розділених пробілами, у текстове поле. При натисканні на кнопку "Встановити класи" скрипт встановлює введені класи для div за допомогою властивості className.
Наприклад, якщо користувач введе blue green, то div отримає класи blue та green, і його колір зміниться на зелений (оскільки клас green має вищий пріоритет у CSS). Якщо користувач видалить всі класи з текстового поля та натисне кнопку, то div втратить усі класи та відобразиться без кольору.
Користувач може взаємодіяти зі сторінкою, вводячи різні комбінації класів та спостерігаючи, як змінюється вигляд div. Це доз
У цьому прикладі ми використали властивість className для додавання класу "highlight" та видалення класу "inactive" з елемента. Зверніть увагу, що для видалення класу ми використали метод replace, який замінює підстрічку "inactive" на порожній рядок.
// Отримуємо посилання на елемент з ідентифікатором "exampleElement".
const element = document.getElementById("exampleElement");
// Додаємо клас "highlight" до класів елемента.
element.className += " highlight";
// Видаляємо клас "inactive" з класів елемента.
element.className = element.className.replace("inactive", "");У цьому прикладі ми використали властивість className для перевірки наявності класу "active" на елементі. Якщо клас вже присутній, ми його видаляємо; якщо немає - додаємо. Це дозволяє змінювати стиль елементів залежно від стану програми або дій користувача.
// Отримуємо посилання на елемент з ідентифікатором "exampleElement".
const element = document.getElementById("exampleElement");
// Перевіряємо чи містить список класів елемента клас "active".
if (element.className.includes("active")) {
// Якщо так, видаляємо його.
element.className = element.className.replace("active", "");
} else {
// Якщо ні, додаємо його.
element.className += " active";
}