Klasseliste JavaScript | Forklart

En JavaScript Dom -funksjon som heter “Klasseliste”Kan brukes til å style et elements CSS -klasser. Det er en skrivebeskyttet JavaScript-egenskap som brukes til å representere informasjonen som er inkludert i et elements klasseegenskap. Mer spesifikt blir navnene på CSS -klassene returnert av den kalt klasselisten.

Denne oppskrivningen vil illustrere klasselisten JavaScript-egenskapen og dens bruk i JavaScript.

Hva er klasseliste i JavaScript?

“Klasseliste”Er JavaScript DOM-skrivebeskyttet attributt som representerer dataene i et elements klasseegenskap. Det gir navnene på CSS -klassene som utgang. Til tross for at de er skrivebeskyttet, kan klasselisten fortsatt brukes til å endre klassene. Videre kan du endre CSS -klassene gitt til et HTML -element ved hjelp av klasselisteobjektet.

Syntaks

Følg den gitte syntaks for å bruke klasseliste -attributtet:

element.Klasseliste;

Her, "element”Er HTML -elementet.

Eksempel

I dette eksemplet vil vi opprette en knapp ved å tildele en klasse som heter “knapp”Og fest onClick () -hendelsen til den som vil sende ut navnene på den tildelte klassen til knappen når den utløses:

Klikk for å vise den tildelte klassen til knappen

Klikk her

Nå vil vi stille grensradiusen til knappen som "2cm”I CSS -filen:

.knapp
Border-Radius: 2cm;

Vi vil koble stilarket til HTML -filen ved å bruke “" stikkord:

I JavaScript -filen, definer en funksjon “ButtonClick ()”På en slik måte at når det blir påkalt, for det første, dokumentet.getElementById () Metode Tilgangsknapp ved hjelp av ID -en og vis deretter den tildelte klassen til knappen i en varsel () -metode:

Funksjon ButtonClick ()
var klikk = dokument.getElementById ("BTN");
Varsel (klikk.klasseliste);

Produksjon

La oss sjekke ut metodene til klasselisten JavaScript -eiendommen.

Hva er metodene for klasselisteegenskapen?

Det er noen metoder for klasselisteegenskapen som følger:

• Legg til()
• fjerne()
• veksle()
• inneholder ()
• punkt()
• erstatte()

Den undergitte tabellen omfatter beskrivelsen av de nevnte metodene:

Metoder	Beskrivelse
Legg til()	Du kan legge til en eller flere klasser i et element med ADD () -metoden.
fjerne()	For å eliminere klasser fra elementets liste over klasser, bruk Remove () -metoden.
veksle()	Å bytte de spesielle klassenavnene på et element gjøres ved hjelp av Toggle () -metoden. Den spesifiserte klassen er lagt til med ett klikk, og klassen fjernes med et nytt klikk.
inneholder ()	For å sjekke om den gitte klassen eksisterer i elementet eller ikke, bruk contain () -metoden.
punkt()	Det brukes til å vise navnene på klassene som er til stede på den spesifikke indeksen.
erstatte()	En eksisterende klasse kan erstattes med en ny klasse ved hjelp av erstatningsmetoden.

Nå vil vi diskutere noen ofte brukte metoder for klasselisten.

Eksempel 1: Hvordan bruke Add () Metode for klasselisteegenskaper?

Vi vil legge til nye klasser i knappen ved å klikke på den nye "Legg til klasse i knappen”:

Legg til klasse i knappen

Opprett deretter to klasser "BtnColor”Og“fet tekst”Det vil legge til knappen Bakgrunnsfarge og fete teksten på knappen:

.btnColor
bakgrunnsfarge: Blueviolet;

.fet tekst
Fontvekt: fet;

I JavaScript -filen, definer en funksjon som heter “addclass ()”Det vil kalle“Legg til()”Metode for klasselisten med navnet på klassen som et argument lagt til i knappens klasse:

funksjon addClass ()
var newClass = dokument.getElementById ("BTN").Klasseliste;
Newclass.legg til ("btnColor");
Newclass.Legg til ("BoldText");

Utgangen indikerer at de nye klassene er lagt til i knappen “Klikk her" når "Legg til klasse i knappen”Klikket. Klikk deretter på "Klikk her”-Knappen for å vise listen over klasser:

Eksempel 2: Hvordan bruke Fjern () Metode for klasselisteegenskaper?

Vi vil nå fjerne en klasse fra listen. For å gjøre det, oppretter vi en ny knapp "Fjern klassen fra knappen”Og legg ved en OnClick () -hendelse med det:

Fjern klassen fra knappen

Vi vil definere en funksjon "Fjerningsklass ()”I JavaScript -fil for å fjerne klassen“BtnColor”Fra listen over klassene:

funksjon removeClass ()
var newClass = dokument.getElementById ("BTN").Klasseliste;
Newclass.fjerne ("btnColor");

Som du kan se i utgangen, "Klikk her”-Knappen viste en klasse som heter“knapp”Og så når“Legg til klasse i knappen”Klikket, to nye klasser”fet tekst”Og“BtnColor”Legges til listen, og bakgrunnsfargen på knappen er også endret. Til slutt, klikk på "Fjern klassen fra knappen”Vil fjerne“BtnColor”Klasse fra listen:

Eksempel 3: Hvordan bruke Toggle () Metode for klasselistegenskap?

Nå vil vi bruke Toggle () -metoden for å slå listen over klasser på ett klikk og vil fjerne på et annet klikk:

Veksle -knapp

I JavaScript -filen, definer en funksjon “ToggleClass ()”Det vil først legge til knappens farge på det ene klikket og deretter fjerne den på det andre klikket:

funksjon toggleClass ()
var newClass = dokument.getElementById ("BTN").Klasseliste;
Newclass.veksle ("btnColor");

Den tilsvarende utgangen er som følger:

Alle de grunnleggende retningslinjene for klasselisten JavaScript -eiendom er dekket.

Konklusjon

“Klasseliste”Er det skrivebeskyttede attributtet til JavaScript som gir navnene på CSS-klassene tildelt HTML-elementet. Det tillater å endre CSS -klassene ved hjelp av sine forhåndsdefinerte metoder, inkludert add (), fjerne (), veksle () og så videre. I denne oppskrivningen har vi illustrert klasselisten JavaScript-egenskapen og dens metoder med detaljerte eksempler.