Class-attribuuttia voidaan käyttää CSS:ssä suorittamaan tehtäviä elementeille, joilla on vastaava luokkanimi. Tässä artikkelissa keskustelemme luokan lisäämisestä elementtiin JavaScriptin avulla. Sisään JavaScript , on olemassa joitakin tapoja lisätä luokka elementtiin. Voimme käyttää .luokan nimi omaisuutta tai .lisätä() menetelmä lisätä luokan nimi tiettyyn elementtiin.

Nyt keskustellaan lähestymistavoista luokan lisäämiseksi elementtiin.

.className-ominaisuuden käyttäminen

The .luokan nimi ominaisuus asettaa elementin luokan nimen. Tätä ominaisuutta voidaan käyttää palauttamaan elementin class-attribuutin arvo. Tämän ominaisuuden avulla voimme lisätä luokan HTML-elementtiin korvaamatta sen olemassa olevaa luokkaa.

Jos haluat lisätä useita luokkia, meidän on erotettava niiden nimet välilyönnillä, kuten 'luokka1 luokka2' .

Jos luokka on jo ilmoitettu elementille ja meidän on lisättävä uusi luokan nimi samaan elementtiin, se tulee ilmoittaa lisäämällä välilyönti ennen uuden luokan nimen kirjoittamista, muuten se korvaa olemassa olevan luokan nimen. Se voidaan kirjoittaa seuraavasti:

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

Yllä olevaan koodiin olemme lisänneet välilyönnin aiemmin uusi luokka .

Syntaksi

Tämän ominaisuuden yleisesti käytetty syntaksi luokan nimen asettamiseen tai palauttamiseen on annettu alla.

Luokan nimen asettaminen

 element.className = class 

Luokan nimen palauttaminen

 element.className 

Esimerkki .luokan nimi omaisuus esitetään seuraavasti.

Esimerkki - Luokan nimen lisääminen

Tässä esimerkissä käytämme .luokan nimi ominaisuuden lisäämistä varten 'for' luokka kappaleelementtiin, jolla on id 'p1' . Käytämme CSS:ää vastaavaan kappaleeseen käyttämällä luokan nimeä 'for' .

Meidän on napsautettava annettua HTML-painike 'Lisää luokka' nähdäksesi vaikutuksen.

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

Lähtö

Kun napsautat annettua painiketta, tulos on -