Denna manual kommer att förklara proceduren för att lägga till en aktiv klass i JavaScript.
Hur lägger man till Active Class i JavaScript?
För att lägga till en aktiv klass kommer vi att använda följande metoder:
Låt oss gå över till den första metoden!
Metod 1: Använd document.getElementById() med classList.add() Metod för att lägga till aktiv klass i JavaScript
I JavaScript är ' document.getElementById() ”-metoden används för att komma åt ett visst element genom dess id. Men den väljer bara elementen baserat på deras id, inte klasser. Du kan använda den med ' classList.add() ” metod för att lägga till en aktiv klass i JavaScript.
Låt oss utforska denna metod genom att ta ett exempel.
Exempel
I vår HTML-fil tar vi ' ' taggen med lite text, ange dess id som ' Text ', och lägg till ett ' onclick ' händelse som kommer att utlösa ' Aktivera() ' funktion. Observera att lägg till
-taggen i
-taggen: < p id = 'Text' onclick = 'Aktivera()' > Tryck här sid >I JavaScript-filen definierar du activate()-funktionen på ett sådant sätt att den först kommer åt styckeelementet med hjälp av dess id i metoden document.getElementbyId(). Lägg sedan till en CSS-klass till dess klasslista för stylingändamål:
funktionen aktiveras ( ) {
det finns en = dokumentera. getElementById ( 'Text' ) ;
a. klasslista . Lägg till ( 'nyklass' ) ;
}
I CSS-filen, placera en punkt före ' nyklass ' och tilldela ' bakgrundsfärg ' egenskap ett värde ' orange ”:
. nyklass {bakgrund - Färg : orange ;
}
Som ett resultat, när du klickar på styckeelementet, kommer den tillagda bakgrundsegenskapen att tillämpas på det:
Låt oss ta en titt på följande metod där vi kommer att använda document.querySelector() för att lägga till en aktiv klass.
Metod 2: Använd document.querySelector() med classList.add() Metod för att lägga till Active Class i JavaScript
I JavaScript är ' document.querySelector() ”-metoden används för att hämta det första elementet från koden. Du kan ange klasser och ID både inom querySelector()-metoden. Den kan användas med ' classList.add() ” metod för att lägga till en aktiv klass i JavaScript.
Exempel
Vi kommer nu bara att använda ' document.querySelector() 'med id' #Text ” för att välja styckeelementet. Återigen kommer metoden classList.add() att användas för att lägga till den aktiva ' nyklass ”:
funktionen aktiveras ( ) {det finns en = dokumentera. querySelector ( '#Text' ) ;
a. klasslista . Lägg till ( 'nyklass' ) ;
}
Produktion
Vi har lärt oss två enklaste metoder för att lägga till aktiv klass i JavaScript
Slutsats
För att lägga till aktiv klass kan vi använda ' getElementById() ' eller ' querySelector() ” med metoden classList.add(). Båda nämnda metoder hämtar först element genom sitt id, och använder sedan metoden classList.add(), det nya klassnamnet som tilldelas elementet som kan användas för stylingändamål. Det här inlägget har beskrivit proceduren för att lägga till en aktiv klass i JavaScript.