I fasen med at designe en webside eller et websted, er der visse situationer, hvor du ikke længere behøver at få adgang til nogle bestemte elementer på grund af en opdatering. Desuden, når der er behov for at tildele mere end én klasse til et specifikt element i html. I sådanne case-scenarier er ændring af klassen af et HTML-element i JavaScript en stor hjælp til at imødekomme sådanne situationer.
Denne blog vil demonstrere de tilgange, du skal overveje, når du ændrer et HTML-elements klasse i JavaScript.
Hvordan ændres klassen af et HTML-element med JavaScript?
For at ændre klassen af et HTML-element med JavaScript kan følgende fremgangsmåder anvendes:
-
- “ klassenavn ” ejendom.
- “ klasseliste ” ejendom.
Fremgangsmåde 1: Skift klassen af et HTML-element med JavaScript ved hjælp af className-egenskaben
Denne tilgang kan træde i kraft ved at få adgang til den oprettede klasse, der er knyttet til et element, og tildele den en anden klasse.
Det følgende eksempel viser det angivne koncept.
Eksempel
I den nedenfor angivne kode i ' ' tag, skal du inkludere følgende overskrift i ' ” tag. Derefter skal du oprette den angivne knap, som vil blive tildelt en standard ' klasse ” som vil blive ændret senere i koden. Tildel den også en ' id ' og en vedhæftet ' onclick ” hændelse, der påkalder funktionen Class().
Senere i koden skal du inkludere følgende meddelelse i ' ” tag for at vise det på DOM ved transformation af klasse:
HTML-kode:
< legeme stil = 'text-align: center;' >< h2 > Skift element s klassenavn
Gamle klassenavn er: standardklasse
I JS-koden skal du erklære en funktion ved navn ' Klasse() ”. Her skal du få adgang til standardklassen ved dens id ved at bruge ' document.getElementById() ” metode. Det ' klassenavn ' egenskab vil transformere den oprettede klasse til klassen med navnet ' ny klasse ”.
Endelig er ' indreTekst egenskab vil vise følgende meddelelse sammen med den ændrede klasse:
JS kode:
fungere Klasse ( ) {document.getElementById ( 'myButton' ) .className = 'ny klasse' ;
var access = document.getElementById ( 'myButton' ) .klassenavn;
document.getElementById ( 'hoved' ) .innerHTML = 'Nyt klassenavn er:' + adgang;
}
Produktion
I ovenstående output skal du observere ændringen af ' klasse ” til højre ved at klikke på knappen i DOM.
Fremgangsmåde 2: Skift klassen af et HTML-element med JavaScript ved hjælp af classList-egenskaben
Denne særlige tilgang kan implementeres for at fjerne den angivne klasse og tildele en ny klasse til den og derved ændre den.
Eksempel
Gentag først de ovenfor diskuterede metoder til at inkludere en overskrift, oprette en knap med den tildelte klasse, id og vedhæftede onclick-hændelse, der påkalder den angivne funktion. Tilføj derefter overskriftssektionen i ' ” tag for at underrette brugeren om den ændrede klasse ved et klik på knappen:
HTML kode
< legeme stil = 'text-align: center;' >< h2 > Skift klasse af element ! h2 >
< knap klasse = 'Internet side' onclick = 'Klasse()' id = 'lave om' > Klik på Mig knap >
< h3 id = 'hoved' stil = 'baggrundsfarve: lysegrå;' > Det gamle klassenavn er: Hjemmeside h3 >
legeme >
Erklær nu en funktion ved navn ' Klasse() ”. Anvend i sin definition ' klasseliste ' ejendom sammen med ' fjerne() ' metode til at udelade den tilgåede klasse med navnet ' Internet side ” som svarer til den oprettede knap.
I næste trin skal du tildele en ny klasse til den samme klasse ved hjælp af den diskuterede egenskab med ' tilføje() ” metode. Til sidst, vis den ændrede klasse som diskuteret i den tidligere tilgang:
JS kode
fungere Klasse ( ) {document.getElementById ( 'lave om' ) .classList.remove ( 'Internet side' )
document.getElementById ( 'lave om' ) .classList.add ( 'Linux' ) ;
var access = document.getElementById ( 'lave om' ) .classList;
document.getElementById ( 'hoved' ) .innerHTML = 'Nyt klassenavn er:' + adgang;
}
Produktion
Denne opskrivning betød at fjerne konceptet med at ændre HTML-elementets klasse ved hjælp af JavaScript.
Konklusion
Det ' klassenavn ' og ' klasseliste ” egenskaber kan bruges til at ændre klassen af et HTML-element. ClassName-egenskaben førte til en hurtigere tilgang til at udføre det ønskede krav sammenlignet med classList-egenskaben, da den involverede mindre kodekompleksitet. ClassList-egenskaben ændrede på den anden side standardklassen ved hjælp af yderligere to metoder. Denne artikel illustrerede fremgangsmåderne til at ændre HTML-elementets klasse med JavaScript.