TechCodeview

A JavaScript classList a JavaScript DOM-tulajdonsága, amely lehetővé teszi egy elem CSS (Cascading Style Sheet) osztályainak stílusozását. A JavaScript classList egy csak olvasható tulajdonság, amely a CSS-osztályok nevét adja vissza. Ez a JavaScript tulajdonsága a JavaScript többi tulajdonságához képest, amely magában foglalja a stílust és az osztálynevet. A style tulajdonság a CSS-osztályelem színét vagy más stílusát adja vissza, a className pedig a CSS-fájlban használt osztályok nevének visszaadására szolgál. A className és a classList tulajdonságok azonban visszaadják azoknak az osztályoknak a nevét, amelyeket a CSS-fájlban használtunk, de eltérő módon. A className tulajdonság az osztályok nevét karakterlánc formájában adja vissza, míg a classList tulajdonság JavaScript visszaadja az osztályok nevét tömb formájában.

Itt röviden megbeszéljük a JavaScript classList-et, és megvitatjuk annak módszereit és gyakorlati megvalósításait.

Példa a JavaScript classList tulajdonságra

Az alábbiakban egy példa a JavaScript classList tulajdonságra, amelyen keresztül megkapjuk egy elem osztályértékét.

 <h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById(&apos;btn&apos;); alert(e.classList); } 

A fenti kód kimenete az alábbiakban látható:

JavaScript osztálylista tulajdonság

A classList tulajdonság az osztályelemek értékének megjelenítésére szolgál, amely a DOMTokenList tárgy. Ez egy csak olvasható tulajdonság, de a programban használt osztályok manipulálásával módosíthatjuk az értékét. A JavaScript classList tulajdonsága a következő metódusokból áll, amelyeken keresztül különböző műveleteket hajthatunk végre az osztályelemeken:

add():Az add() metódus egy vagy több osztály hozzáadására szolgál az elemhez.eltávolítás():A remove() metódus egy vagy több osztály eltávolítására szolgál az elemben lévő osztályok számából.toggle():A toggle() metódus az elemek megadott osztályneveinek váltására szolgál. Ez azt jelenti, hogy egy kattintással a megadott osztály hozzáadódik, egy másik kattintással pedig az osztály eltávolításra kerül. Egy elem kapcsoló tulajdonságaként ismert.csere():A helyettesítő() metódus egy meglévő osztály új osztályra cseréjére szolgál.tartalmazza ():A JavaScript classList tulajdonság include() metódusa a logikai érték visszaadására szolgál kimenetként. Ha az osztály jelen van, az értéket igazként adja vissza, ellenkező esetben hamis értéket ad vissza.tétel():Az item() metódus az osztályok nevének megjelenítésére szolgál az adott indexen. Így visszaadja az osztály nevét.

Ez néhány a JavaScript osztálylistában használt metódusok közül.

Egyenként megbeszéljük.

classList.add()

A függvény, amely egy vagy több osztály CSS elemhez való hozzáadására szolgál.

A karakterlánc java-t tartalmaz

Példa:

Az alábbi példa bemutatja, hogyan lehet osztályt hozzáadni a classList.add() metódussal:

 .myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.add(&apos;myClass&apos;); } 

A kódban, amikor a felhasználó rákattint a gombra, az új osztály hozzáadódik a meglévő osztályokhoz. A gombra kattintás után a kimenet az alábbiakban látható:

algoritmus bfs-hez

classList.remove()

A remove() függvény a meglévő osztályok eltávolítására szolgál az elemekből.

Az alábbi példa bemutatja, hogyan távolíthat el egy vagy több osztályt a classlist.remove() metódussal:

 .myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById(&apos;Btn&apos;); e.classList.remove(&apos;myClass&apos;); } 

A fenti kódban, amikor a felhasználó rákattint a gombra, az adott osztály eltávolításra kerül a meglévő CSS osztályok közül. A gombra kattintás után a kimenet az alábbiakban látható:

Classlist.toggle()

A toggle() gomb az osztályok elemre váltására szolgál. Ez egy új osztály hozzáadását vagy a meglévő osztályok eltávolítását jelenti.

Az alábbiakban látható egy példa, amely megmagyarázza, hogyan használhatjuk a toggle() metódust osztályok hozzáadásához vagy eltávolításához.

Példa:

 .myClass1{background: red;} .myClass2 {background: blue;} <h3> Click on the button to add or remove the class</h3> <br> function get_toggle() { var e = document.getElementById(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

A kódban, amikor a felhasználó rákattint a gombra, az osztály hozzáadódik vagy eltávolításra kerül a CSS osztályokból. A gombra kattintás után a kimenet az alábbiakban látható:

Classlist.contains()

A include() metódus annak ellenőrzésére szolgál, hogy a megadott osztály létezik-e a CSS osztályokban, és ehhez képest igaz vagy hamis logikai értéket ad vissza.

Az alábbiakban egy példa bemutatja, hogyan kereshet egy osztályt, ha létezik vagy nem a include() metódus használatával:

Példa:

 function getClass() { var e = document.getElementById(&apos;Btn&apos;); document.write(e.classList.contains(&apos;myClass&apos;)+&apos; <br>&apos;+&apos;myclass is the name of the class&apos;); } 

A fenti kódban látható, hogy amikor a felhasználó rákattint a gombra, akkor ellenőrzi a megadott osztályt, ha jelen van a CSS osztályokban. Ha jelen van, akkor a rendszer egy igaz logikai értéket ad vissza. Ellenkező esetben hamisan tér vissza. A fenti kód kimenete a gombra kattintás után az alábbiakban látható:

hogyan találta ki az iskolát

classlist.replace()

A helyettesítő() metódus egy meglévő osztály újra cseréjére szolgál. Ez nem azt jelenti, hogy az osztályt eltávolítjuk az elemekből, hanem a meglévő osztály tulajdonságait az új osztály tulajdonságaival helyettesítjük.

Az alábbiakban látható egy példa, amelyen keresztül megértjük, hogyan cserélhetünk le egy meglévő osztályt egy új osztályra:

Példa:

 .myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } 

A fenti kódban, amikor a felhasználó rákattint a gombra, a meglévő osztálytulajdonságok lecserélődnek az új osztálytulajdonságokra. A gombra kattintás után a kimenet az alábbiakban látható:

classList.item()

Az item() függvény arra szolgál, hogy visszaadja annak az osztálynak a nevét, amely a megadott indexértéken van.

Az alábbiakban látható egy példa, amelyből megértjük, hogyan kell az item() metódust használni az érték visszaadására:

Példa:

 <h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById(&apos;Btn&apos;); alert(e.classList.item(2)); } 

A kódban, amikor a felhasználó rákattint a gombra, megjelenik a megadott indexen lévő osztály. A gombra kattintás után megkapjuk a megadott indexosztály értéket, az alábbiak szerint:

Ez a classList DOM objektum néhány metódusa, és minden a classListről szól.