A class attribútum használható a CSS-ben bizonyos feladatok elvégzésére a megfelelő osztálynévvel rendelkező elemekhez. Ebben a cikkben azt tárgyaljuk, hogyan adhatunk osztályt egy elemhez JavaScript használatával. Ban ben JavaScript , létezik néhány megközelítés osztály hozzáadására egy elemhez. Használhatjuk a .osztály név ingatlan vagy a .add() metódust osztálynév hozzáadásához az adott elemhez.
Most beszéljük meg az osztály elemhez adásának módjait.
.className tulajdonság használata
A .osztály név property beállítja egy elem osztálynevét. Ez a tulajdonság használható egy elem osztály attribútumának értékének visszaadására. Ezzel a tulajdonsággal hozzáadhatunk egy osztályt egy HTML-elemhez anélkül, hogy a meglévő osztályt lecserélnénk.
Több osztály hozzáadásához szóközzel kell elválasztanunk a nevüket, például 'class1 class2' .
Ha egy osztály már deklarálva van egy elemhez, és ugyanahhoz az elemhez új osztálynevet kell hozzáadnunk, akkor azt egy szóköz beszúrásával kell deklarálni az új osztálynév beírása előtt, ellenkező esetben felülírja a meglévő osztálynevet. A következőképpen írható:
document.getElementById('div1').className = ' newClass';
A fenti kódban korábban szóközt szúrtunk be newClass .
Szintaxis
A tulajdonság általánosan használt szintaxisa az osztálynév beállításához vagy visszaadásához az alábbiakban található.
Az osztálynév beállításához
element.className = class
Az osztálynév visszaadásához
element.className
Példa a használatára .osztály név tulajdonság a következőképpen van megadva.
Példa - Az osztálynév hozzáadása
Ebben a példában a .osztály név tulajdonság hozzáadásához a 'for' osztályt az azonosítóval rendelkező bekezdéselemhez 'p1' . A CSS-t a megfelelő bekezdésre alkalmazzuk az osztálynév használatával 'for' .
A megadottra kell kattintanunk HTML gomb 'Osztály hozzáadása' látni a hatást.
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'); } Tesztelje most Kimenet
Az adott gombra kattintás után a kimenet a következő lesz:
