Atribut razreda se lahko uporablja v CSS za izvajanje nekaterih nalog za elemente z ustreznim imenom razreda. V tem članku razpravljamo o tem, kako dodati razred elementu z uporabo JavaScripta. notri JavaScript , obstaja nekaj pristopov za dodajanje razreda elementu. Lahko uporabimo .className premoženje ali .add() metoda za dodajanje imena razreda določenemu elementu.

Zdaj pa se pogovorimo o pristopih za dodajanje razreda elementu.

Uporaba lastnosti .className

The .className lastnost nastavi ime razreda elementa. To lastnost lahko uporabite za vrnitev vrednosti atributa razreda elementa. To lastnost lahko uporabimo za dodajanje razreda elementu HTML, ne da bi zamenjali njegov obstoječi razred.

Če želite dodati več razredov, moramo njihova imena ločiti s presledkom, npr 'razred1 razred2' .

Če je razred že deklariran za element in moramo istemu elementu dodati novo ime razreda, ga je treba deklarirati tako, da vnesemo presledek, preden napišemo novo ime razreda, sicer bo prepisal obstoječe ime razreda. Lahko se zapiše takole:

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

V zgornjo kodo smo prej vstavili presledek newClass .

Sintaksa

Pogosto uporabljena sintaksa te lastnosti za nastavitev ali vrnitev imena razreda je podana spodaj.

Za nastavitev imena razreda

 element.className = class 

Če želite vrniti ime razreda

 element.className 

Primer uporabe .className premoženje je podano na naslednji način.

Primer – dodajanje imena razreda

V tem primeru uporabljamo .className lastnost za dodajanje 'za' razreda na element odstavka z id 'p1' . CSS uporabljamo za ustrezen odstavek z uporabo imena razreda 'za' .

Klikniti moramo dano Gumb HTML 'Dodaj razred' da vidim učinek.

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

Izhod

Po kliku danega gumba bo rezultat -