Denne håndboken vil forklare prosedyren for å legge til en aktiv klasse i JavaScript.
Hvordan legge til Active Class i JavaScript?
For å legge til en aktiv klasse, bruker vi følgende metoder:
La oss gå over til den første metoden!
Metode 1: Bruk document.getElementById() med classList.add() Metode for å legge til aktiv klasse i JavaScript
I JavaScript er ' document.getElementById() ”-metoden brukes til å få tilgang til et bestemt element ved hjelp av dets id. Den velger imidlertid bare elementene basert på deres IDer, ikke klasser. Du kan bruke den med ' classList.add() ” 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 som ' tekst ', og legg til en ' ved trykk '-hendelse som vil utløse ' aktivere() ' funksjon. Merk at du legger til
-taggen i
-taggen: < p id = 'tekst' ved trykk = 'aktiver()' > Trykk her s >I JavaScript-filen definerer du activate()-funksjonen på en slik måte at den først får tilgang til avsnittselementet ved å bruke ID-en i document.getElementbyId()-metoden. Legg deretter til en CSS-klasse til klasselisten for stylingformål:
funksjon aktiveres ( ) {
det er en = dokument. getElementById ( 'tekst' ) ;
en. klasseliste . legge til ( 'ny klasse' ) ;
}
I CSS-filen, plasser en prikk før ' ny klasse ' og tilordne ' bakgrunnsfarge ' eiendom en verdi ' oransje ':
. ny klasse {bakgrunn - farge : oransje ;
}
Som et resultat, når du klikker på avsnittselementet, vil den ekstra bakgrunnsegenskapen bli brukt på det:
La oss ta en titt på følgende metode der vi vil bruke document.querySelector() for å legge til en aktiv klasse.
Metode 2: Bruk document.querySelector() med classList.add() Metode for å legge til aktiv klasse i JavaScript
I JavaScript er ' document.querySelector() ”-metoden brukes for å hente det første elementet fra koden. Du kan spesifisere klasser og IDer både innenfor querySelector()-metoden. Den kan brukes med ' classList.add() ” metode for å legge til en aktiv klasse i JavaScript.
Eksempel
Vi vil nå bare bruke ' document.querySelector() 'med id' #tekst ' for å velge avsnittselementet. Igjen vil classList.add()-metoden bli brukt for å legge til den aktive ' ny klasse ':
funksjon aktiveres ( ) {det er en = dokument. querySelector ( '#tekst' ) ;
en. klasseliste . legge til ( 'ny klasse' ) ;
}
Produksjon
Vi har lært to enkleste metoder for å legge til aktiv klasse i JavaScript
Konklusjon
For å legge til en aktiv klasse, kan vi bruke ' getElementById() ' eller ' querySelector() ” med classList.add()-metoden. Begge de nevnte metodene henter først elementer etter ID-en deres, og bruker deretter classList.add()-metoden, det nye klassenavnet som er tildelt elementet som kan brukes til stylingformål. Dette innlegget har beskrevet prosedyren knyttet til å legge til en aktiv klasse i JavaScript.