A HTML osztályokat JavaScript-ben a classList tulajdonsággal tudjuk kezelni. A classList egy olyan objektum, amely többféle módszert biztosít a HTML elem osztályainak kezelésére.
Például, ha szeretnénk hozzáadni az intro osztályt az element változóban tárolt elemhez, akkor így tehetjük meg:
element.classList.add("intro");
Ha szeretnénk eltávolítani az intro osztályt az elemről, akkor használhatjuk a remove módszert:
element.classList.remove("intro");
Az osztályok állapotát (hogy az adott elemen szerepel-e vagy sem) a contains módszerrel ellenőrizhetjük. Például:
if (element.classList.contains("intro")) {
console.log("Az elem rendelkezik az intro osztállyal.");
} else {
console.log("Az elem nem rendelkezik az intro osztállyal.");
}
A classList objektum toggle módszere segítségével egyetlen művelettel válthatjuk ki és be az osztályokat az HTML elemeken.
Például, ha szeretnénk váltogatni az intro osztályt az element változóban tárolt elemen, akkor így tehetjük meg:
element.classList.toggle("intro");
Ez az utasítás első alkalommal hozzáadja az intro osztályt az elemhez, második alkalommal pedig eltávolítja.
A toggle módszer második, opcionális paraméterével megadhatjuk, hogy az osztályt kikapcsoljuk vagy bekapcsoljuk. Ha a második paraméter true, akkor az osztályt hozzáadjuk az elemhez, ha false, akkor eltávolítjuk.
Például, ha szeretnénk mindig bekapcsolni az intro osztályt, akkor így tehetjük:
element.classList.toggle("intro", true);
Ha szeretnénk mindig kikapcsolni az intro osztályt, akkor így tehetjük:
element.classList.toggle("intro", false);
Fontos megjegyezni, hogy ha az osztály már megtalálható az elemen, akkor a toggle módszer nem fogja hozzáadni újra, hanem eltávolítja. Éppen ezért a fenti példákban is a true és a false paraméterekkel állítjuk be, hogy az osztályt hozzáadjuk vagy eltávolítsuk.