Atribut klase može se koristiti u CSS-u za obavljanje nekih zadataka za elemente s odgovarajućim nazivom klase. U ovom članku raspravljamo o tome kako dodati klasu elementu pomoću JavaScripta. U JavaScript , postoje neki pristupi za dodavanje klase elementu. Možemo koristiti .className imovine ili .dodati() metoda za dodavanje naziva klase određenom elementu.

Raspravljajmo sada o pristupima za dodavanje klase elementu.

Korištenje svojstva .className

The .className svojstvo postavlja naziv klase elementa. Ovo se svojstvo može koristiti za vraćanje vrijednosti atributa klase elementa. Ovo svojstvo možemo koristiti za dodavanje klase HTML elementu bez zamjene postojeće klase.

Da bismo dodali više klasa, moramo odvojiti njihova imena razmakom kao što je 'klasa1 klasa2' .

Ako je klasa već deklarirana za element, a trebamo dodati novi naziv klase istom elementu, tada ga treba deklarirati umetanjem razmaka prije pisanja novog naziva klase, inače će prebrisati postojeći naziv klase. Može se napisati na sljedeći način:

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

U gornjem kodu smo prije umetnuli razmak nova klasa .

Sintaksa

Često korištena sintaksa ovog svojstva za postavljanje ili vraćanje naziva klase je navedena u nastavku.

Za postavljanje naziva klase

 element.className = class 

Da vratite ime klase

 element.className 

Primjer korištenja .className imovina je dana kako slijedi.

Primjer - Dodavanje naziva klase

U ovom primjeru koristimo .className svojstvo za dodavanje 'za' klase na element paragrafa koji ima id 'p1' . Primjenjujemo CSS na odgovarajući paragraf koristeći naziv klase 'za' .

Moramo kliknuti dato HTML gumb 'Dodaj razred' vidjeti učinak.

 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;); } 

Izlaz

Nakon klika na dani gumb, izlaz će biti -