Aquest manual explicarà el procediment per afegir una classe activa a JavaScript.
Com afegir una classe activa a JavaScript?
Per afegir una classe activa, utilitzarem els mètodes següents:
Anem al primer mètode!
Mètode 1: utilitzeu document.getElementById() amb el mètode classList.add() per afegir una classe activa a JavaScript
En JavaScript, el ' document.getElementById() ” s'utilitza per accedir a un determinat element pel seu id. Tanmateix, només selecciona els elements en funció dels seus identificadors, no de les classes. Podeu utilitzar-lo amb el ' classList.add() ” mètode per afegir una classe activa en JavaScript.
Explorem aquest mètode prenent un exemple.
Exemple
Al nostre fitxer HTML, agafarem el ' ” amb un text, especifiqueu el seu identificador com “ txt ”, i afegiu un “ fent clic ” esdeveniment que desencadenarà el “ activar() ” funció. Tingueu en compte que, afegiu l'etiqueta
dins de l'etiqueta
: < p id = 'txt' fent clic = 'activa ()' > Toqueu Aquí pàg >Al fitxer JavaScript, definiu la funció activate() de manera que primer accedeixi a l'element paràgraf mitjançant el seu identificador al mètode document.getElementbyId(). A continuació, afegiu una classe CSS a la seva llista de classes amb finalitats d'estil:
funció activada ( ) {
hi ha un = document. getElementById ( 'txt' ) ;
a. classList . afegir ( 'nova classe' ) ;
}
Al fitxer CSS, col·loqueu un punt abans de ' nova classe ' i assigneu el ' color de fons 'propietat un valor' taronja ”:
. nova classe {fons - color : taronja ;
}
Com a resultat, quan feu clic a l'element del paràgraf, s'aplicarà la propietat de fons afegida:
Fem una ullada al següent mètode en què utilitzarem el document.querySelector() per afegir una classe activa.
Mètode 2: utilitzeu document.querySelector() amb el mètode classList.add() per afegir una classe activa a JavaScript
En JavaScript, el ' document.querySelector() ” s'utilitza per obtenir el primer element del codi. Podeu especificar classes i identificadors tant dins del mètode querySelector(). Es pot utilitzar amb el ' classList.add() ” mètode per afegir una classe activa en JavaScript.
Exemple
Ara només utilitzarem el ' document.querySelector() 'amb identificació' #txt ” per seleccionar l'element de paràgraf. De nou, s'utilitzarà el mètode classList.add() per afegir l'actiu ' nova classe ”:
funció activada ( ) {hi ha un = document. querySelector ( '#txt' ) ;
a. classList . afegir ( 'nova classe' ) ;
}
Sortida
Hem après dos mètodes més senzills per afegir classe activa a JavaScript
Conclusió
Per afegir classe activa, podem utilitzar el ' getElementById() ' o ' querySelector() ” amb el mètode classList.add(). Els dos mètodes esmentats obtenen primer els elements pel seu identificador, després utilitzant el mètode classList.add(), el nou nom de classe assignat a l'element que es pot utilitzar per a estils. Aquesta publicació ha descrit el procediment relacionat amb afegir una classe activa a JavaScript.