JavaScript is a dynamic language that provides various programming options to perform multiple tasks. For instance, changing an element’s color is one of the most frequent tasks while developing a website. To do so, first, get the reference to the HTML element you want to change the color, then assign it the color value in JavaScript style color attribute.

This study will illustrate the methods for changing the color of the text in JavaScript.

How to Change Text Color in JavaScript?

For changing the text color in JavaScript, use the below-mentioned predefined JavaScript methods:

• style.color property with getElementById() method
• style.color property with querySelector() method

Let’s explain these methods individually.

Method 1: Change Text Color Using style.color property with getElementById() Method

To change the color of the text, you can use the “getElementById()” method with the “style.color” property. In such a scenario, the text element can be accessed using the getElementById() method and then apply the color attribute with the help of HTML style.color property.

Syntax

Use the given syntax for changing text color by using color property with the help of the getElementById() method:

The “id” is the element’s id specified to access the text element and then change its color using the style.color property.

Head toward the below example to understand the stated concept!

Example

First, we will create a heading using <h4> tag and assign an id “id” that is used to access the h4 element, then, create a button that invokes a function named “changeColor()” defined in a JavaScript(JS) file when the onclick event of the added button gets triggered:

In JS file, define a function named “changeColor()” and get the heading by passing its id to the getElementById() method and then change its color:

Lastly, specify the source of the JavaScript file using the src tag in the HTML file:

It can be seen from the output that when the added button is clicked, the text element changed its color to “red”:

Let’s check out the other method!

Method 2: Change Text Color Using style.color property with querySelector() Method

You can also change the color of the text using the “querySelector()” method with style.color property. It accesses the element with both id or the assigned class while the getElementById() method just fetches the element with its assigned id.

Syntax

Use the following syntax to change the text color using color property with the help of querySelector() method:

Example

Here, we will use the <p> tag to add a paragraph with class named “color”, that will help to access the <p> element and a button that will call the JavaScript “changeColor()” method when its onclick event will be triggered:

In the definition of the “changeColor()” method, we will invoke the “querySelector()” method by passing class name with dot(.) that indicates the element is accessed based on its class name, and then apply color property on it:

However, to use an id in an HTML element and access it using querySelector() method, add the “#” sign with id name:

Output

We have gathered the simplest approach to change the text color in JavaScript.

Conclusion

For changing text color, you can use the style.color property with the help of getElementById() method or querySelector() method. The getElementById() method is used to access the HTML element based on its assigned id, while the querySelector() method accesses the element based on the assigned id or the class by specifying (#) or (.) signs, respectively. This study illustrated the simple procedure for changing the text color in JavaScript.