Ve fázi návrhu webové stránky nebo webu nastávají určité situace, kdy již nepotřebujete přistupovat k některým konkrétním prvkům kvůli nějaké aktualizaci. Navíc, když je potřeba přiřadit více než jednu třídu konkrétnímu prvku v html. V takovýchto případových scénářích je změna třídy HTML elementu v JavaScriptu velkým pomocníkem při řešení takových situací.
Tento blog demonstruje přístupy, které je třeba zvážit při změně třídy prvku HTML v JavaScriptu.
Jak změnit třídu prvku HTML pomocí JavaScriptu?
Chcete-li změnit třídu prvku HTML pomocí JavaScriptu, lze použít následující přístupy:
-
- “ jméno třídy ' vlastnictví.
- “ classList ' vlastnictví.
Přístup 1: Změňte třídu prvku HTML pomocí JavaScriptu pomocí vlastnosti className
Tento přístup může vstoupit v platnost přístupem k vytvořené třídě spojené s prvkem a přiřazením jiné třídy.
Následující příklad demonstruje uvedený koncept.
Příklad
V níže uvedeném kódu v rámci „ “, zahrňte následující nadpis do “ ” tag. Poté vytvořte zadané tlačítko, kterému bude přiřazeno výchozí „ třída “, která se později v kódu změní. Také mu přiřaďte „ id “ a připojený „ při kliknutí ” událost vyvolávající funkci Class().
Později v kódu zahrňte následující zprávu do „ ” pro zobrazení na DOM při transformaci třídy:
HTML kód:
< tělo styl = 'text-align: center;' >< h2 > Změnit prvek Název třídy
Starý název třídy je: výchozí třída
V kódu JS deklarujte funkci s názvem „ Třída() “. Zde získáte přístup k výchozí třídě podle jejího id pomocí „ document.getElementById() “ metoda. ' jméno třídy Vlastnost ” transformuje vytvořenou třídu na třídu s názvem “ nová třída “.
Konečně, „ vnitřníText Vlastnost ” zobrazí následující zprávu spolu se změněnou třídou:
JS kód:
funkce Třída ( ) {document.getElementById ( 'myButton' ) .className = 'nová třída' ;
var access = document.getElementById ( 'myButton' ) .jméno třídy;
document.getElementById ( 'hlava' ) .innerHTML = 'Nový název třídy je:' + přístup;
}
Výstup
Ve výše uvedeném výstupu sledujte změnu „ třída ” vpravo po kliknutí na tlačítko v DOM.
Přístup 2: Změňte třídu prvku HTML pomocí JavaScriptu pomocí vlastnosti classList
Tento konkrétní přístup lze implementovat k odstranění zadané třídy a přiřazení nové třídy, čímž ji změníte.
Příklad
Nejprve zopakujte výše popsané metody pro zahrnutí nadpisu, vytvoření tlačítka s přiřazenou třídou, id a připojenou událostí onclick vyvolávající zadanou funkci. Dále podobným způsobem přidejte sekci záhlaví do „ ” pro upozornění uživatele na změněnou třídu po kliknutí na tlačítko:
HTML kód
< tělo styl = 'text-align: center;' >< h2 > Změnit třídu prvku ! h2 >
< knoflík třída = 'Webová stránka' při kliknutí = 'Třída()' id = 'změna' > Klikni na mě knoflík >
< h3 id = 'hlava' styl = 'barva pozadí: světle šedá;' > Starý název třídy je: Web h3 >
tělo >
Nyní deklarujte funkci s názvem „ Třída() “. V jeho definici použijte „ classList “ nemovitost spolu s “ odstranit() ” metoda k vynechání přistupované třídy s názvem “ webová stránka “, které odpovídá vytvořenému tlačítku.
V dalším kroku přiřaďte ke stejné třídě novou třídu pomocí diskutované vlastnosti s „ přidat() “ metoda. Nakonec zobrazte změněnou třídu, jak je popsáno v předchozím přístupu:
Kód JS
funkce Třída ( ) {document.getElementById ( 'změna' ) .classList.remove ( 'Webová stránka' )
document.getElementById ( 'změna' ) .classList.add ( 'linux' ) ;
var access = document.getElementById ( 'změna' ) .classList;
document.getElementById ( 'hlava' ) .innerHTML = 'Nový název třídy je:' + přístup;
}
Výstup
Tento zápis měl objasnit koncept změny třídy prvku HTML pomocí JavaScriptu.
Závěr
' jméno třídy ' a ' classList ” vlastnosti lze využít ke změně třídy elementu HTML. Vlastnost className vedla k rychlejšímu přístupu při provádění požadovaného požadavku ve srovnání s vlastností classList, protože zahrnovala menší složitost kódu. Vlastnost classList na druhé straně změnila výchozí třídu pomocí dalších dvou metod. Tento článek ilustroval přístupy ke změně třídy elementu HTML pomocí JavaScriptu.