Ta priročnik bo razložil postopek dodajanja aktivnega razreda v JavaScript.
Kako dodati aktivni razred v JavaScript?
Za dodajanje aktivnega razreda bomo uporabili naslednje metode:
Pojdimo na prvo metodo!
1. način: uporabite document.getElementById() z metodo classList.add() za dodajanje aktivnega razreda v JavaScript
V JavaScriptu je » document.getElementById() ” se uporablja za dostop do določenega elementa z njegovim ID-jem. Vendar pa izbere samo elemente na podlagi njihovih ID-jev, ne pa razredov. Uporabite ga lahko z ' classList.add() ” za dodajanje aktivnega razreda v JavaScript.
Raziščimo to metodo na primeru.
Primer
V naši datoteki HTML bomo vzeli » ” z nekaj besedila, navedite njegov ID kot “ txt «, in dodajte » onclick ' dogodek, ki bo sprožil ' aktiviraj() ”. Upoštevajte, da dodajte oznako
znotraj oznake
: < p id = 'txt' onclick = 'aktiviraj()' > Tapnite Tukaj str >V datoteki JavaScript definirajte funkcijo activate() tako, da najprej dostopa do elementa odstavka z njegovim ID-jem v metodi document.getElementbyId(). Nato dodajte razred CSS na njegov seznam razredov za namene oblikovanja:
funkcijo aktivirati ( ) {
obstaja a = dokument. getElementById ( 'txt' ) ;
a. classList . dodati ( 'novi razred' ) ;
}
V datoteki CSS postavite piko pred » nov razred « in dodelite » Barva ozadja 'lastnost vrednost' oranžna ”:
. nov razred {ozadje - barva : oranžna ;
}
Posledično, ko kliknete na element odstavka, bo zanj uporabljena dodana lastnost ozadja:
Oglejmo si naslednjo metodo, v kateri bomo uporabili document.querySelector() za dodajanje aktivnega razreda.
2. način: uporabite document.querySelector() z metodo classList.add() za dodajanje aktivnega razreda v JavaScript
V JavaScriptu je » document.querySelector() ” se uporabi metoda za pridobivanje prvega elementa iz kode. V metodi querySelector() lahko določite tako razrede kot ID-je. Lahko se uporablja z ' classList.add() ” za dodajanje aktivnega razreda v JavaScript.
Primer
Sedaj bomo uporabljali samo ' document.querySelector() ' z id ' #txt ”, da izberete element odstavka. Spet bo metoda classList.add() uporabljena za dodajanje aktivnega ' nov razred ”:
funkcijo aktivirati ( ) {obstaja a = dokument. querySelector ( '#txt' ) ;
a. classList . dodati ( 'novi razred' ) ;
}
Izhod
Naučili smo se dveh najpreprostejših metod za dodajanje aktivnega razreda v JavaScript
Zaključek
Za dodajanje aktivnega razreda lahko uporabimo » getElementById() « ali » querySelector() ” z metodo classList.add(). Obe omenjeni metodi najprej pridobita elemente po njihovem ID-ju, nato pa z metodo classList.add() novo ime razreda, dodeljeno elementu, ki se lahko uporablja za namene oblikovanja. Ta objava opisuje postopek, povezan z dodajanjem aktivnega razreda v JavaScript.