Aquest estudi il·lustrarà els mètodes per canviar el color del text en JavaScript.
Com canviar el color del text a JavaScript?
Per canviar el color del text a JavaScript, utilitzeu els mètodes de JavaScript predefinits esmentats a continuació:
- propietat style.color amb el mètode getElementById().
- propietat style.color amb el mètode querySelector().
Expliquem aquests mètodes individualment.
Mètode 1: Canvia el color del text utilitzant la propietat style.color amb el mètode getElementById()
Per canviar el color del text, podeu utilitzar el ' getElementById() ' mètode amb el ' estil.color ' propietat. En aquest cas, es pot accedir a l'element de text mitjançant el mètode getElementById() i després aplicar l'atribut color amb l'ajuda de la propietat HTML style.color.
Sintaxi
Utilitzeu la sintaxi donada per canviar el color del text mitjançant la propietat color amb l'ajuda del mètode getElementById():
document. getElementById ( 'id' ) . estil . color = 'color' ;El ' id ” és l'identificador de l'element especificat per accedir a l'element de text i després canviar-ne el color mitjançant la propietat style.color.
Dirigiu-vos a l'exemple següent per entendre el concepte indicat!
Exemple
Primer, crearem un encapçalament amb etiqueta i assigna un identificador ' id ' que s'utilitza per accedir a l'element h4 i, a continuació, creeu un botó que invoqui una funció anomenada ' canvi de color() ” es defineix en un fitxer JavaScript (JS) quan s'activa l'esdeveniment onclick del botó afegit:
< h4 id = 'id' > Benvingut a LinuxHint h4 >< tipus de botó = 'botó' fent clic = 'canviar el color()' > Feu clic per veure la màgia botó >
Al fitxer JS, definiu una funció anomenada ' canvi de color() ” i obteniu l'encapçalament passant el seu identificador al mètode getElementById() i després canvieu-ne el color:
funció canviaColor ( ) {document. getElementById ( 'id' ) . estil . color = 'vermell' ;
}
Finalment, especifiqueu l'origen del fitxer JavaScript mitjançant l'etiqueta src del fitxer HTML:
< script src = './JSfile.js' > guió >A la sortida es pot veure que quan es fa clic al botó afegit, l'element de text va canviar el seu color a ' vermell ”:
Anem a veure l'altre mètode!
Mètode 2: Canvia el color del text mitjançant la propietat style.color amb el mètode querySelector().
També podeu canviar el color del text amb el botó “ querySelector() ” mètode amb propietat style.color. Accedeix a l'element tant amb l'identificador com amb la classe assignada mentre que el mètode getElementById() només obté l'element amb el seu identificador assignat.
Sintaxi
Utilitzeu la sintaxi següent per canviar el color del text mitjançant la propietat color amb l'ajuda del mètode querySelector():
document. querySelector ( 'id/className' ) . estil . color = 'color' ;Exemple
Aquí, farem servir el etiqueta per afegir un paràgraf amb la classe anomenada ' color ”, que ajudarà a accedir a l'element
i un botó que anomenarà JavaScript “ canvi de color() ” mètode quan s'activarà el seu esdeveniment onclick:
< pàg classe = 'color' > Benvingut a LinuxHint pàg >< botó al fer clic = 'canviar el color()' > Feu clic per veure la màgia botó >
En la definició de ' canvi de color() ”, invocarem el “ querySelector() ” passant el nom de classe amb un punt (.) que indica que s'accedeix a l'element en funció del seu nom de classe i, a continuació, aplicar-hi la propietat de color:
funció canviaColor ( ) {document. querySelector ( '.color' ) . estil . color = 'Magenta' ;
}
Tanmateix, per utilitzar un identificador en un element HTML i accedir-hi mitjançant el mètode querySelector(), afegiu el ' # ” signe amb el nom d'identificació:
document. querySelector ( '#color' ) . estil . color = 'Magenta' ;Sortida
Hem recopilat l'enfocament més senzill per canviar el color del text a JavaScript.
Conclusió
Per canviar el color del text, podeu utilitzar la propietat style.color amb l'ajuda del mètode getElementById() o del mètode querySelector(). El mètode getElementById() s'utilitza per accedir a l'element HTML en funció del seu identificador assignat, mentre que el mètode querySelector() accedeix a l'element segons l'identificador assignat o la classe especificant els signes (#) o (.), respectivament. Aquest estudi va il·lustrar el procediment senzill per canviar el color del text en JavaScript.