Denne manual vil forklare proceduren for at tilføje en aktiv klasse i JavaScript.
Hvordan tilføjes Active Class i JavaScript?
For at tilføje en aktiv klasse, vil vi bruge følgende metoder:
Lad os gå over til den første metode!
Metode 1: Brug document.getElementById() med classList.add() Metode til at tilføje aktiv klasse i JavaScript
I JavaScript er ' document.getElementById() ” metode bruges til at få adgang til et bestemt element ved dets id. Det vælger dog kun elementerne baseret på deres id'er, ikke klasser. Du kan bruge den med ' classList.add() ” metode til at tilføje en aktiv klasse i JavaScript.
Lad os udforske denne metode ved at tage et eksempel.
Eksempel
I vores HTML-fil tager vi ' ' tag med noget tekst, angiv dets id som ' txt ', og tilføj et ' onclick ' hændelse, som vil udløse ' aktivere() ' funktion. Bemærk, at tilføje
-tagget i
-tagget: < p id = 'txt' onclick = 'aktiver()' > Tryk her s >I JavaScript-filen skal du definere activate()-funktionen på en sådan måde, at den først får adgang til afsnitselementet ved hjælp af dets id i document.getElementbyId()-metoden. Tilføj derefter en CSS-klasse til dens klasseliste til stylingformål:
funktion aktiveres ( ) {
der er en = dokument. getElementById ( 'txt' ) ;
en. klasseliste . tilføje ( 'ny klasse' ) ;
}
I CSS-filen skal du placere en prik før ' ny klasse ' og tildel ' baggrundsfarve ' ejendom en værdi ' orange ”:
. ny klasse {baggrund - farve : orange ;
}
Som et resultat, når du klikker på afsnitselementet, vil den tilføjede baggrundsegenskab blive anvendt på det:
Lad os se på følgende metode, hvor vi vil bruge document.querySelector() til at tilføje en aktiv klasse.
Metode 2: Brug document.querySelector() med classList.add() Metode til at tilføje aktiv klasse i JavaScript
I JavaScript er ' document.querySelector() ”-metoden bruges til at få det første element fra koden. Du kan angive klasser og id'er både i querySelector()-metoden. Den kan bruges med ' classList.add() ” metode til at tilføje en aktiv klasse i JavaScript.
Eksempel
Vi vil nu kun bruge ' document.querySelector() 'med id' #txt ” for at vælge afsnitselementet. Igen vil classList.add() metoden blive brugt til at tilføje den aktive ' ny klasse ”:
funktion aktiveres ( ) {der er en = dokument. querySelector ( '#txt' ) ;
en. klasseliste . tilføje ( 'ny klasse' ) ;
}
Produktion
Vi har lært to enkleste metoder til at tilføje aktiv klasse i JavaScript
Konklusion
For at tilføje en aktiv klasse kan vi bruge ' getElementById() ' eller ' querySelector() ” med classList.add() metoden. Begge nævnte metoder henter først elementer efter deres id, derefter ved at bruge classList.add() metoden, det nye klassenavn tildelt til elementet, der kan bruges til stylingformål. Dette indlæg har beskrevet proceduren i forbindelse med tilføjelse af en aktiv klasse i JavaScript.