Cómo cambiar el color de texto en JavaScript

JavaScript es un lenguaje dinámico que proporciona varias opciones de programación para realizar múltiples tareas. Por ejemplo, cambiar el color de un elemento es una de las tareas más frecuentes al desarrollar un sitio web. Para hacerlo, primero, obtenga la referencia al elemento HTML que desea cambiar el color, luego asigne el valor de color en el atributo de color de estilo JavaScript.

Este estudio ilustrará los métodos para cambiar el color del texto en JavaScript.

Cómo cambiar el color de texto en JavaScript?

Para cambiar el color del texto en JavaScript, use los métodos de JavaScript predefinidos a continuación:

• estilo.Propiedad de color con el método GetElementById ()
• estilo.Propiedad de color con el método QuerySelector ()

Expliquemos estos métodos individualmente.

Método 1: Cambiar el color del texto usando el estilo.Propiedad de color con el método GetElementById ()

Para cambiar el color del texto, puede usar el "getElementById ()"Método con el"estilo.color" propiedad. En dicho escenario, se puede acceder al elemento de texto utilizando el método getElementById () y luego aplicar el atributo de color con la ayuda del estilo HTML.propiedad de color.

Sintaxis

Use la sintaxis dada para cambiar el color de texto utilizando la propiedad de color con la ayuda del método getElementById ():

documento.getElementById ("ID").estilo.color = "color";

El "identificación"¿Se especifica la identificación del elemento para acceder al elemento de texto y luego cambiar su color usando el estilo.propiedad de color.

Dirígete hacia el siguiente ejemplo para comprender el concepto declarado!

Ejemplo

Primero, crearemos un encabezado usando

etiqueta y asignar una identificación "identificación"Eso se usa para acceder al elemento H4, luego, cree un botón que invoque una función llamada"Changecolor ()"Definido en un archivo JavaScript (JS) cuando se activa el evento OnClick del botón agregado:

Bienvenido a Linuxhint

Haga clic para ver la magia

En el archivo JS, defina una función llamada "Changecolor ()"Y obtenga el encabezado pasando su identificación al método getElementById () y luego cambia su color:

function changeColor ()
documento.getElementById ("ID").estilo.color = "rojo";

Por último, especifique la fuente del archivo JavaScript utilizando la etiqueta SRC en el archivo HTML:

Se puede ver desde 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 de texto usando el estilo.Propiedad de color con el método QuerySelector ()

También puede cambiar el color del texto usando el "QuerySelector ()"Método con estilo.propiedad de color. Accede al elemento con ID o la clase asignada, mientras que el método GetElementById () solo obtiene el elemento con su ID asignado.

Sintaxis

Use la siguiente sintaxis para cambiar el color de texto utilizando la propiedad de color con la ayuda del método QuerySelector ():

documento.QuerySelector ("id/classname").estilo.color = "color";

Ejemplo

Aquí, usaremos el

Etiqueta para agregar un párrafo con la clase llamada "color", Eso ayudará a acceder al

elemento y un botón que llamará al JavaScript "Changecolor ()"Método cuando se activará su evento OnClick:

Bienvenido a Linuxhint

Haga clic para ver la magia

En la definición de "Changecolor ()"Método, invocaremos el"QuerySelector ()"Método pasando el nombre de la clase con DOT (.) que indica que se accede al elemento en función del nombre de su clase y luego aplica la propiedad de color:

function changeColor ()
documento.QuerySelector (".color").estilo.color = "magenta";

Sin embargo, para usar una ID en un elemento HTML y acceder a él usando el método QuerySelector (), agregue el "#"Firma con el nombre de ID:

documento.QuerySelector ("#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 de texto, puede usar el estilo.Propiedad de color con la ayuda del método GetElementById () o Método QuerySelector (). El método getElementById () se utiliza para acceder al elemento HTML en función de su ID asignada, mientras que el método QuerySelector () accede al elemento en función de la ID asignada o la clase especificando (#) o ((.) signos, respectivamente. Este estudio ilustró el procedimiento simple para cambiar el color del texto en JavaScript.