JavaScript classList je vlastnosť DOM jazyka JavaScript, ktorá umožňuje štýlovanie tried CSS (Cascading Style Sheet) prvku. JavaScript classList je vlastnosť len na čítanie, ktorá vracia názvy tried CSS. Je to vlastnosť JavaScriptu vzhľadom na ostatné vlastnosti JavaScriptu, ktoré zahŕňajú štýl a názov triedy. Vlastnosť style vracia farbu alebo iný štýl prvku triedy CSS a className sa používa na vrátenie názvov tried použitých v súbore CSS. Vlastnosti className a classList však vracajú názov tried, ktoré sme použili v súbore CSS, ale rôznymi spôsobmi. Vlastnosť className vracia názov tried vo forme reťazca, zatiaľ čo vlastnosť classList JavaScript vráti názov tried vo forme poľa.
Tu urobíme krátku diskusiu o JavaScript classList a tiež o jeho metódach s ich praktickými implementáciami.
filmová herečka rekha
Príklad vlastnosti classList jazyka JavaScript
Nižšie je uvedený príklad vlastnosti classList jazyka JavaScript, prostredníctvom ktorej získame hodnotu triedy prvku.
<h3>Click on the button to get the class value </h3><br> function getClass() { var e = document.getElementById('btn'); alert(e.classList); } Výstup vyššie uvedeného kódu je uvedený nižšie:
Vlastnosť classList JavaScript
Vlastnosť classList sa používa na vyjadrenie hodnoty prvkov triedy, ktorá je a DOMTokenList objekt. Je to vlastnosť len na čítanie, ale jej hodnotu môžeme upraviť manipuláciou s triedami použitými v programe. Vlastnosť classList jazyka JavaScript pozostáva z nasledujúcich metód, pomocou ktorých môžeme vykonávať rôzne operácie s prvkami triedy:
Toto sú niektoré z metód, ktoré sa používajú v triede JavaScript.
Budeme diskutovať jeden po druhom.
classList.add()
Funkcia, ktorá sa používa na pridanie jednej alebo viacerých tried do prvku CSS.
Príklad:
Nižšie uvedený príklad ukazuje, ako pridať triedu pomocou metódy classList.add():
.myClass {background: red;} <h3> Click on the button and add the class</h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.add('myClass'); } Keď používateľ klikne na tlačidlo v kóde, nová trieda sa pridá k existujúcim triedam. Výstup po kliknutí na tlačidlo je zobrazený nižšie:
classList.remove()
Funkcia remove() sa používa na odstránenie existujúcich tried z prvkov.
Nižšie uvedený príklad ukazuje, ako odstrániť jednu alebo viac tried pomocou metódy classlist.remove():
.myClass {background: red;} <h3> Click on the button and remove the class </h3> <br> function getClass() { var e = document.getElementById('Btn'); e.classList.remove('myClass'); } Vo vyššie uvedenom kóde, keď používateľ klikne na tlačidlo, konkrétna špecifikovaná trieda sa odstráni z existujúcich tried CSS. Výstup po kliknutí na tlačidlo je zobrazený nižšie:
Classlist.toggle()
Tlačidlo toggle() sa používa na prepínanie tried k prvku. Znamená to pridanie novej triedy alebo odstránenie existujúcich tried.
Nižšie je uvedený príklad, ktorý nám pomôže pochopiť, ako použiť metódu toggle() na pridávanie alebo odstraňovanie tried.
Príklad:
.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('Btn'); e.classList.toggle('myClass2'); } Keď používateľ v kóde klikne na tlačidlo, trieda sa pridá alebo odstráni z tried CSS. Výstup po kliknutí na tlačidlo je zobrazený nižšie:
Classlist.contains()
Metóda obsahuje() sa používa na kontrolu, či zadaná trieda existuje v triedach CSS a vzhľadom na ňu vracia booleovskú hodnotu ako true alebo false.
Nižšie je uvedený príklad, ktorý ukazuje, ako vyhľadať triedu, ak existuje alebo nie, pomocou metódy obsahuje():
Príklad:
function getClass() { var e = document.getElementById('Btn'); document.write(e.classList.contains('myClass')+' <br>'+'myclass is the name of the class'); } Vo vyššie uvedenom kóde je vidieť, že keď používateľ klikne na tlačidlo, potom skontroluje špecifikovanú triedu, ak je prítomná v triedach CSS. Ak je prítomná, vráti sa boolovská hodnota ako true. V opačnom prípade sa vráti false. Výstup vyššie uvedeného kódu po kliknutí na tlačidlo je uvedený nižšie:
classlist.replace()
Metóda replace() sa používa na nahradenie existujúcej triedy novou. Neznamená to, že trieda je odstránená z prvkov, ale vlastnosti existujúcej triedy sú nahradené vlastnosťami novej triedy.
Nižšie je uvedený príklad, pomocou ktorého pochopíme, ako môžeme nahradiť existujúcu triedu novou triedou:
Príklad:
.myClass1 {background: red;} .myClass2 {background: blue;} function replace_Class() { var e = document.getElementById('Btn'); e.classList.replace('myClass1', 'myClass2'); } Vo vyššie uvedenom kóde, keď používateľ klikne na tlačidlo, existujúce vlastnosti triedy sa nahradia novými vlastnosťami triedy. Výstup po kliknutí na tlačidlo je zobrazený nižšie:
classList.item()
Funkcia item() sa používa na vrátenie názvu triedy, ktorá je prítomná na zadanej hodnote indexu.
Nižšie je uvedený príklad, ktorý nám pomôže pochopiť, ako použiť metódu item() na vrátenie hodnoty:
Príklad:
<h3> Click on the button to get the specified index value</h3><br> function get_Class() { var e = document.getElementById('Btn'); alert(e.classList.item(2)); } Keď používateľ klikne na tlačidlo v kóde, zobrazí sa trieda prítomná v zadanom indexe. Po kliknutí na tlačidlo získame zadanú hodnotu triedy indexu, ako je uvedené nižšie:
Toto sú niektoré z metód objektu classList DOM a všetko o classList.