JavaScript classList je vlastnost DOM JavaScriptu, která umožňuje stylování tříd CSS (Cascading Style Sheet) prvku. JavaScript classList je vlastnost pouze pro čtení, která vrací názvy tříd CSS. Je to vlastnost JavaScriptu s ohledem na ostatní vlastnosti JavaScriptu, které zahrnují styl a název třídy. Vlastnost style vrací barvu nebo jiný styl prvku třídy CSS a className se používá pro vrácení názvů tříd použitých v souboru CSS. Vlastnosti className a classList však vracejí název tříd, které jsme použili v souboru CSS, ale různými způsoby. Vlastnost className vrací název tříd ve formě řetězce, zatímco vlastnost classList JavaScript vrátí název tříd ve formě pole.

Zde krátce pojednáme o JavaScriptu classList a také o jeho metodách s jejich praktickými implementacemi.

Příklad vlastnosti classList JavaScriptu

Níže je uveden příklad vlastnosti classList JavaScriptu, jejímž prostřednictvím získáme hodnotu třídy prvku.

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

Výstup výše uvedeného kódu je uveden níže:

turbo c++ ke stažení

Vlastnost classList JavaScriptu

Vlastnost classList se používá k reprezentaci hodnoty prvků třídy, což je a DOMTokenList objekt. Je to vlastnost pouze pro čtení, ale její hodnotu můžeme upravit manipulací s třídami použitými v programu. Vlastnost classList JavaScriptu se skládá z následujících metod, pomocí kterých můžeme provádět různé operace s prvky třídy:

přidat():Metoda add() se používá pro přidání jedné nebo více tříd do prvku.odstranit():Metoda remove() se používá k odstranění jedné nebo více tříd z počtu tříd přítomných v prvku.přepnout():Metoda toggle() se používá k přepínání zadaných názvů tříd prvku. To znamená, že jedním kliknutím se zadaná třída přidá a dalším kliknutím se třída odstraní. Je známá jako vlastnost toggle prvku.nahradit():Metoda replace() se používá k nahrazení existující třídy novou třídou.obsahuje():Metoda obsahuje() vlastnosti classList JavaScriptu se používá k vrácení booleovské hodnoty jako výstupu. Pokud je třída přítomna, hodnota je vrácena jako true, jinak je vrácena hodnota false.položka():Metoda item() se používá pro zobrazení názvů tříd na konkrétním indexu. Vrátí tedy název třídy.

Toto jsou některé z metod, které se používají v JavaScript classList.

Budeme diskutovat jeden po druhém.

classList.add()

Funkce, která se používá pro přidání jedné nebo více tříd do prvku CSS.

Příklad:

java otevírání souboru

Níže uvedený příklad ukazuje, jak přidat třídu pomocí metody classList.add():

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

Když uživatel v kódu klikne na tlačítko, nová třída se přidá ke stávajícím třídám. Výstup po kliknutí na tlačítko je zobrazen níže:

classList.remove()

Funkce remove() se používá k odstranění existujících tříd z prvků.

Níže uvedený příklad ukazuje, jak odstranit jednu nebo více tříd pomocí metody classlist.remove():

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

Ve výše uvedeném kódu, když uživatel klikne na tlačítko, konkrétní zadaná třída se odstraní ze stávajících tříd CSS. Výstup po kliknutí na tlačítko je zobrazen níže:

Classlist.toggle()

Tlačítko toggle() se používá k přepínání tříd k prvku. Znamená to přidat novou třídu nebo odebrat existující třídy.

Níže je uveden příklad, který nám umožní pochopit, jak využít metodu toggle() k přidání nebo odebrání tříd.

pořadí podle náhodného sql

Pří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(&apos;Btn&apos;); e.classList.toggle(&apos;myClass2&apos;); } 

Když uživatel v kódu klikne na tlačítko, třída bude přidána nebo odebrána z tříd CSS. Výstup po kliknutí na tlačítko je zobrazen níže:

Classlist.contains()

Metoda obsahuje() se používá ke kontrole, zda zadaná třída existuje ve třídách CSS a vzhledem k ní vrací booleovskou hodnotu jako true nebo false.

Níže je uveden příklad, který ukazuje, jak hledat třídu, pokud existuje nebo ne, pomocí metody obsahuje():

Příklad:

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

Ve výše uvedeném kódu je vidět, že když uživatel klikne na tlačítko, zkontroluje zadanou třídu, pokud je přítomna ve třídách CSS. Pokud je přítomen, bude vrácena logická hodnota jako true. Jinak se vrátí false. Výstup výše uvedeného kódu po kliknutí na tlačítko je zobrazen níže:

shreya ghoshal první manžel

classlist.replace()

Metoda replace() se používá k nahrazení existující třídy novou. Neznamená to, že třída je odstraněna z prvků, ale vlastnosti existující třídy jsou nahrazeny vlastnostmi nové třídy.

Níže je uveden příklad, jehož prostřednictvím pochopíme, jak můžeme nahradit existující třídu novou třídou:

Příklad:

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

Ve výše uvedeném kódu, když uživatel klikne na tlačítko, jsou stávající vlastnosti třídy nahrazeny novými vlastnostmi třídy. Výstup po kliknutí na tlačítko je zobrazen níže:

classList.item()

Funkce item() se používá k vrácení názvu třídy, která je přítomna na zadané hodnotě indexu.

Níže je uveden příklad, který nám pomůže pochopit, jak použít metodu item() k vrácení hodnoty:

Příklad:

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

Když uživatel v kódu klikne na tlačítko, zobrazí se třída přítomná na zadaném indexu. Po kliknutí na tlačítko získáme zadanou hodnotu indexové třídy, jak je uvedeno níže:

Toto jsou některé z metod objektu classList DOM a vše o classList.