Acest manual va explica procedura de adăugare a unei clase active în JavaScript.
Cum se adaugă o clasă activă în JavaScript?
Pentru a adăuga o clasă activă, vom folosi următoarele metode:
Să trecem la prima metodă!
Metoda 1: Folosiți document.getElementById() cu metoda classList.add() pentru a adăuga o clasă activă în JavaScript
În JavaScript, „ document.getElementById() ” este folosită pentru a accesa un anumit element prin id-ul său. Cu toate acestea, selectează doar elementele pe baza id-urilor lor, nu a claselor. Îl poți folosi cu „ classList.add() ” pentru adăugarea unei clase active în JavaScript.
Să explorăm această metodă luând un exemplu.
Exemplu
În fișierul nostru HTML, vom lua „ ” etichetă cu ceva text, specificați id-ul acesteia ca „ txt ”, și adăugați un „ onclick ” eveniment care va declanșa “ Activati() ”funcție. Rețineți că, adăugați eticheta
în eticheta
: < p id = 'txt' onclick = 'Activati()' > Apasa aici p >În fișierul JavaScript, definiți funcția activate() în așa fel încât să acceseze mai întâi elementul paragraf folosind id-ul său în metoda document.getElementbyId(). Apoi, adăugați o clasă CSS la lista de clase pentru scopuri de stil:
funcția activată ( ) {
este un = document. getElementById ( 'txt' ) ;
A. classList . adăuga ( 'noua clasa' ) ;
}
În fișierul CSS, plasați un punct înainte de „ noua clasa ” și atribuiți „ culoare de fundal „proprietate o valoare” portocale ”:
. noua clasa {fundal - culoare : portocale ;
}
Ca urmare, când veți face clic pe elementul paragraf, i se va aplica proprietatea de fundal adăugată:
Să aruncăm o privire la următoarea metodă în care vom folosi document.querySelector() pentru a adăuga o clasă activă.
Metoda 2: Folosiți document.querySelector() cu metoda classList.add() pentru a adăuga o clasă activă în JavaScript
În JavaScript, „ document.querySelector() ” este utilizată pentru a obține primul element din cod. Puteți specifica clase și ID-uri atât în cadrul metodei querySelector(). Poate fi folosit cu „ classList.add() ” pentru adăugarea unei clase active în JavaScript.
Exemplu
Acum vom folosi doar „ document.querySelector() „cu id” #txt ” pentru a selecta elementul paragraf. Din nou, metoda classList.add() va fi folosită pentru a adăuga activarea „ noua clasa ”:
funcția activată ( ) {este un = document. querySelector ( '#txt' ) ;
A. classList . adăuga ( 'noua clasa' ) ;
}
Ieșire
Am învățat două metode simple de a adăuga o clasă activă în JavaScript
Concluzie
Pentru a adăuga o clasă activă, putem folosi „ getElementById() ” sau ” querySelector() ” cu metoda classList.add(). Ambele metode menționate primesc mai întâi elementele după id-ul lor, apoi folosind metoda classList.add(), noul nume de clasă atribuit elementului care poate fi folosit în scopuri de stil. Această postare a descris procedura legată de adăugarea unei clase active în JavaScript.