Hvordan legge til aktiv klasse i JavaScript

Når du utvikler et nettsted, blir noen ganger koden din så lang og kompleks at du ikke kan legge til eller fjerne CSS -ID -er eller klasser individuelt. For å takle slike situasjoner, kan du bruke JavaScript for å legge til aktive klasser for styling eller for å oppfylle andre formål. JavaScript gir forskjellige metoder for å løse det uttalte komplekse problemet umiddelbart.

Denne håndboken vil forklare prosedyren for å legge til en aktiv klasse i JavaScript.

Hvordan legge til aktiv klasse i JavaScript?

For å legge til en aktiv klasse, vil vi bruke følgende metoder:

• dokument.getElementById ()
• dokument.QuerySelector ()

La oss gå over til den første metoden!

Metode 1: Bruk dokument.getElementById () med klasseliste.Legg til () Metode for å legge til aktiv klasse i JavaScript

I JavaScript, "dokument.getElementById ()”Metoden brukes til å få tilgang til et bestemt element av IDen. Imidlertid velger den bare elementene basert på ID -ene deres, ikke klasser. Du kan bruke den med "Klasseliste.Legg til()”Metode for å legge til en aktiv klasse i JavaScript.

La oss utforske denne metoden ved å ta et eksempel.

Eksempel

I HTML -filen vår tar vi "

”Tag med litt tekst, spesifiser IDen sin som“tekst”, Og legg til en“ved trykk”Hendelse som vil utløse“aktivere ()”Funksjon. Legg merke til at legg til

Tag innen taggen:

Trykk her

I JavaScript -filen, definer aktivering () -funksjonen på en slik måte at den først får tilgang til avsnittelementet ved å bruke IDen sin i dokumentet.getElementById () -metode. Legg deretter en CSS -klasse i klasselisten for stylingformål:

funksjon aktiverer ()
var a = dokument.getElementById ("txt");
en.Klasseliste.Legg til ("Newclass");

I CSS -filen, plasser en prikk før “Newclass”Og tilordne“bakgrunnsfarge”Eiendom en verdi”oransje”:

.NewClass
bakgrunnsfarge: oransje;

Som et resultat, når du vil klikke på avsnittselementet, vil den ekstra bakgrunnsegenskapen bli brukt på den:

La oss se på følgende metode der vi bruker dokumentet.QuerySelector () for å legge til en aktiv klasse.

Metode 2: Bruk dokument.QuerySelector () med klasseliste.Legg til () Metode for å legge til aktiv klasse i JavaScript

I JavaScript, "dokument.QuerySelector ()”Metoden brukes for å få det første elementet fra koden. Du kan spesifisere klasser og ID -er både innenfor QuerySelector () -metoden. Det kan brukes med "Klasseliste.Legg til()”Metode for å legge til en aktiv klasse i JavaScript.

Eksempel

Vi vil nå bare bruke "dokument.QuerySelector ()”Med ID“#tekst”For å velge avsnittselementet. Igjen, klasselisten.add () -metoden vil bli brukt til å legge til den aktive “Newclass”:

funksjon aktiverer ()
var a = dokument.QuerySelector ("#txt");
en.Klasseliste.Legg til ("Newclass");

Produksjon

Vi har lært to enkleste metoder for å legge til aktiv klasse i JavaScript

Konklusjon

For å legge til aktiv klasse, kan vi bruke "getElementById ()”Eller“QuerySelector ()”Med klasselisten.Legg til () Metode. Begge nevnte metoder får elementer av sin ID først, og bruker deretter klasseliste.legg til () metode, det nye klassenavnet som er tilordnet elementet som kan brukes til stylingformål. Dette innlegget har beskrevet prosedyren relatert til å legge til en aktiv klasse i JavaScript.