Hvordan du kan bytte klasse ved hjelp av ren javascript i html?

Å bytte en klasse som bruker ren JavaScript i HTML er nyttig når du vil endre utseendet til et element basert på en viss tilstand, for eksempel brukerinteraksjon. For eksempel å endre sideens eller knappens bakgrunnsfarge på klikkhendelsen. Å veksle en klasse tillater å gjøre endringer dynamisk, uten å måtte oppdatere siden. Dette kan bidra til å øke brukeropplevelsen ved å få endringene til å føles mer glatte og mer lydhøre.

Dette innlegget vil illustrere prosedyren for å veksle klassen ved hjelp av JavaScript.

Hvordan slå CSS -klassen ved hjelp av ren JavaScript i HTML?

For å slå klasser som bruker ren JavaScript, bruk "veksle()”Metode for“Klasseliste”Attributt/eiendom. Toggle () -metoden godtar et klassenavn som en parameter. Å bytte en klasse betyr å bytte tilstedeværelse av en klasse på et element i HTML. Det innebærer å sjekke om en klasse er til stede på et element, og om den er, fjerner den. Hvis klassen ikke er tildelt elementet, legges den til.

Eksempel 1: Endre fargen på elementet ved å bytte klasse ved å bruke ren JavaScript i HTML
I det følgende eksemplet vil vi endre bakgrunnsfargen på knappen på knappen ved å slå på klassen.

Først må du lage en knapp, og tilordne en ID “btn”For å style knappen. Fest en “ved trykk”Arrangementet på det som vil påkalle“Classtoggle ()”Funksjon på knappeklikk:

Knapp

I CSS -filen oppretter du en ID “btn”For styling av knappen:

#Btn
polstring: 3px;
Margin: 2px;
Font-Family: Sans-Serif;
Border-Radius: .5REM;

Lage en klasse som heter “gul”For å stille inn elementets bakgrunnsfarge:

.gul
bakgrunnsfarge: gul;

I JavaScript -filen, definer en funksjon “Classtoggle ()”Det vil kalle“veksle()”Metode for“Klasseliste”Eiendom for å bytte knappeklasse:

funksjon ClasStoggle ()
dokument.getElementById ("BTN").Klasseliste.veksle ("gul");

Som du kan se i utdataene mens du klikker på knappen, endres bakgrunnsfargen, det indikerer at "gul”Klasse har blitt tilordnet knappen ved å bruke“veksle()”Metode for“Klasseliste”Eiendom:

Eksempel 2: Endre fonten til elementet ved å bytte klasse ved å bruke ren JavaScript i HTML
I det gitte eksemplet vil vi veksle CSS -klassen for å endre tekst på knappens klikkhendelse.

I en HTML -fil, oppretter du en

Tag for å vise litt tekst og en knapp. Tilordne en ID “Velkommen”Til teksten som hjelper deg med å få teksten og tilordne en klasse ved hjelp av vekslingsmetoden:

Velkommen til Linuxhint

Klikk

Opprett en CSS -klasse “tekst”Det vil endre fargen og skriftstørrelsen på teksten:

.tekst
Font-størrelse: 30px;
Farge: #06B5F5;

Definere en funksjon “Classtoggle ()”Å tildele klassen“tekst" til

Tagelement på knappeklikket som blir hentet ved hjelp av den tildelte ID -en ved hjelp av "getElementById ()”Metode.

funksjon ClasStoggle ()
dokument.getElementById ("Velkommen").Klasseliste.veksle ("tekst");

Det kan sees at “tekst”Klasse er tilordnet den gitte teksten ved å klikke på knappen:

Vi har gitt alle viktige instruksjoner som er relevante for å veksle klassen ved å bruke ren JavaScript i HTML.

Konklusjon

For å veksle klassen ved hjelp av ren JavaScript i HTML, bruk "veksle()”Metode for“Klasseliste”Eiendom. Det hjelper til å tildele en klasse til elementet hvis den er tilordnet den. Dette innlegget illustrerte prosedyren for å bytte klasser ved hjelp av JavaScript.