Атрибут class можна використовувати в CSS для виконання деяких завдань для елементів із відповідним іменем класу. У цій статті ми обговорюємо, як додати клас до елемента за допомогою JavaScript. в JavaScript , існують деякі підходи до додавання класу до елемента. Ми можемо використовувати .className власність або .add() метод для додавання імені класу до певного елемента.

Тепер давайте обговоримо підходи до додавання класу до елемента.

Використання властивості .className

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

Щоб додати кілька класів, нам потрібно відокремити їхні назви пробілами, наприклад 'клас1 клас2' .

Якщо клас уже оголошено для елемента, і нам потрібно додати нове ім’я класу до того самого елемента, тоді його слід оголосити, вставивши пробіл перед написанням нового імені класу, інакше воно перепише існуюче ім’я класу. Це можна записати так:

 document.getElementById('div1').className = ' newClass'; 

У коді вище ми вставили пробіл раніше новийКлас .

Синтаксис

Зазвичай використовуваний синтаксис цієї властивості для встановлення або повернення імені класу наведено нижче.

Щоб встановити назву класу

 element.className = class 

Щоб повернути назву класу

 element.className 

Приклад використання .className майно надається наступним чином.

Приклад - додавання назви класу

У цьому прикладі ми використовуємо .className властивість для додавання 'для' клас до елемента абзацу з ідентифікатором 'p1' . Ми застосовуємо CSS до відповідного абзацу, використовуючи назву класу 'для' .

Ми повинні клацнути на даному кнопка HTML «Додати клас» щоб побачити ефект.

 add class name using JavaScript .para { font-size: 30px; background-color: yellow; color: blue; border: 2px dotted red; } <p id="p1"> Welcome to the javaTpoint.com </p> <p> Click the following button to see the effect. </p> Add Class function fun() { var a = document.getElementById(&apos;p1&apos;); a.classList.add(&apos;para&apos;); } 

Вихід

Після натискання вказаної кнопки виведення буде -