Атрибут класе се може користити у ЦСС-у за обављање неких задатака за елементе са одговарајућим именом класе. У овом чланку расправљамо о томе како додати класу елементу користећи ЈаваСцрипт. Ин ЈаваСцрипт , постоје неки приступи за додавање класе елементу. Можемо користити .Назив класе имовине или .додати() метод за додавање имена класе одређеном елементу.
Хајде сада да разговарамо о приступима додавању класе елементу.
Коришћење својства .цлассНаме
Тхе .Назив класе својство поставља име класе елемента. Ово својство се може користити за враћање вредности атрибута класе елемента. Ово својство можемо користити да бисмо додали класу ХТМЛ елементу без замене постојеће класе.
Да бисмо додали више класа, морамо њихово име раздвојити размаком као нпр 'класа1 класа2' .
Ако је класа већ декларисана за елемент, а морамо да додамо ново име класе истом елементу, онда би требало да буде декларисана уметањем размака пре писања новог имена класе, иначе ће то заменити постојеће име класе. Може се написати на следећи начин:
document.getElementById('div1').className = ' newClass';
У горњи код смо раније уметнули размак невЦласс .
Синтакса
Уобичајена синтакса овог својства за постављање или враћање назива класе је дата испод.
Да бисте подесили име класе
element.className = class
Да бисте вратили име класе
element.className
Пример коришћења .Назив класе својство је дато на следећи начин.
Пример – Додавање назива класе
У овом примеру користимо .Назив класе својство за додавање 'за' класе на елемент пасуса који има ид 'п1' . Примењујемо ЦСС на одговарајући пасус користећи име класе 'за' .
Морамо кликнути на дато ХТМЛ дугме 'Додај разред' да видите ефекат.
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('p1'); a.classList.add('para'); }Тестирајте одмах
Излаз
Након што кликнете на дато дугме, излаз ће бити -