Este estudio ilustrará los métodos para cambiar el color del texto en JavaScript.
¿Cómo cambiar el color del texto en JavaScript?
Para cambiar el color del texto en JavaScript, use los métodos de JavaScript predefinidos que se mencionan a continuación:
- propiedad style.color con el método getElementById()
- propiedad style.color con el método querySelector()
Expliquemos estos métodos individualmente.
Método 1: cambiar el color del texto usando la propiedad style.color con el método getElementById()
Para cambiar el color del texto, puede utilizar el botón “ getElementById() ” método con el “ estilo.color ' propiedad. En tal escenario, se puede acceder al elemento de texto usando el método getElementById() y luego aplicar el atributo de color con la ayuda de la propiedad HTML style.color.
Sintaxis
Use la sintaxis dada para cambiar el color del texto usando la propiedad de color con la ayuda del método getElementById():
documento. getElementById ( 'identificación' ) . estilo . color = 'color' ;Los ' identificación ” es la identificación del elemento especificada para acceder al elemento de texto y luego cambiar su color usando la propiedad style.color.
¡Dirígete hacia el siguiente ejemplo para entender el concepto indicado!
Ejemplo
Primero, crearemos un encabezado usando etiquetar y asignar una identificación “ identificación ' que se usa para acceder al elemento h4, luego, cree un botón que invoque una función llamada ' cambiarColor() ” definido en un archivo JavaScript (JS) cuando se activa el evento onclick del botón agregado:
< identificación h4 = 'identificación' > Bienvenido a LinuxHint h4 >< tipo de botón = 'botón' al hacer clic = 'cambiarColor()' > Haga clic para ver la magia botón >
En el archivo JS, defina una función llamada ' cambiarColor() ” y obtén el encabezado pasando su id al método getElementById() y luego cambia su color:
cambio de funciónColor ( ) {documento. getElementById ( 'identificación' ) . estilo . color = 'rojo' ;
}
Por último, especifique la fuente del archivo JavaScript usando la etiqueta src en el archivo HTML:
< origen del script = './JSfile.js' > guion >Se puede ver en la salida que cuando se hace clic en el botón agregado, el elemento de texto cambió su color a ' rojo ”:
¡Veamos el otro método!
Método 2: cambiar el color del texto usando la propiedad style.color con el método querySelector()
También puede cambiar el color del texto usando el botón “ selector de consulta() ” método con propiedad style.color. Accede al elemento con la identificación o la clase asignada, mientras que el método getElementById() solo obtiene el elemento con su identificación asignada.
Sintaxis
Use la siguiente sintaxis para cambiar el color del texto usando la propiedad de color con la ayuda del método querySelector():
documento. selector de consulta ( 'id/nombre de clase' ) . estilo . color = 'color' ;Ejemplo
Aquí, usaremos el etiqueta para agregar un párrafo con una clase llamada ' color ”, que ayudará a acceder al elemento
y un botón que llamará al JavaScript “ cambiarColor() ” cuando se active su evento onclick:
< pags clase = 'color' > Bienvenido a LinuxHint pags >< botón al hacer clic = 'cambiarColor()' > Haga clic para ver la magia botón >
En la definición de “ cambiarColor() ” método, invocaremos el “ selector de consulta() ” pasando el nombre de clase con punto (.) que indica que se accede al elemento en función de su nombre de clase, y luego aplique la propiedad de color en él:
cambio de funciónColor ( ) {documento. selector de consulta ( '.color' ) . estilo . color = 'Magenta' ;
}
Sin embargo, para usar una identificación en un elemento HTML y acceder a ella usando el método querySelector(), agregue el ' # ” firmar con nombre de identificación:
documento. selector de consultas ( '#color' ) . estilo . color = 'Magenta' ;Producción
Hemos reunido el enfoque más simple para cambiar el color del texto en JavaScript.
Conclusión
Para cambiar el color del texto, puede usar la propiedad style.color con la ayuda del método getElementById() o el método querySelector(). El método getElementById() se utiliza para acceder al elemento HTML en función de su ID asignado, mientras que el método querySelector() accede al elemento en función del ID asignado o la clase especificando los signos (#) o (.), respectivamente. Este estudio ilustró el procedimiento simple para cambiar el color del texto en JavaScript.