How to change the font color of a text using JavaScript?

Front End Technology Javascript Web Development

This tutorial teaches us to change the font color of the text using JavaScript. While working with JavaScript and developing the frontend of the application, it needs to change the font color of the text using JavaScript when an event occurs.

For example, we have an application which can turn on or off the device. We have a button to turn on or off the device. When the device is on, make the button text green. Otherwise, make the button text red.

So, in such cases, programmers need to change the font color using JavaScript. We have some different method to overcome the problem at below.

Access the Element and Change the Style

In this section, we will access the element by id or class name using JavaScript. Users can change the style of the element using the .style property. Also, we can change the specific style, such as element color, background color, size, etc.

In our case, we will change the color attribute values to change the font color. Users can follow the below syntax to change the font color using JavaScript.

Syntax

let element = document.getElementById(' element_id ');
element.style.color = colorCode;

Parameters

colorName − It is the new color, which users want to apply to the text. It can be color name, color’s hexadecimal code, or RGB values.

Example

In the below example, we have created a button. When the user clicks on that button, we will call a function named changeFontColor(). Inside the function, we are accessing the button element using its id and changing the color using the color attribute of its style


<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div id = "fonts"> Click the button to change the color of font inside the button.</div>
   <button onclick = "changeFontColor()" id = "btn" >change color</button>
   <script>
 
      // function to change the font color of button
      function changeFontColor() {
         let button = document.getElementById("btn"); // access the button by id
         let color = button.style.color;
         if (color == "red") { // if button color is red change it green otherwise change it to red.
            button.style.color = 'green';
         } else {
            button.style.color = 'red';
         }
      }
   </script>
</body>
</html>

When users will click on the ‘change color’ button, it will toggle the button color between green and red.

Change the color of all text

In this section, we will learn to change the color of all body text. You can consider the scenario. When we apply the dark or light theme to the application, it is not good practice to change the color of every element one by one. Rather, we can change the color of all body text with just a single click.

Users can follow the syntax below to change the body text's font color.

Syntax

document.body.style.color = color

Example

In the below example, we will change the color of the all body text, instead of changing the text of the particular element.


<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
      body {
         color: blue;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div id = "fonts"> Click the button to change the color of font of the whole body</div>
   <button onclick = "changeFontColor()" id = "btn">change color</button>
   <script>
      
      // function to change the font color of button
      function changeFontColor() {

         // toggle the body text color on button click.
         let color = document.body.style.color;
         if (color == "blue") {
            document.body.style.color = 'pink';
         } else {
            document.body.style.color = 'blue';
         }
      }
   </script>
</body>
</html>

When user clicks on the button, it will change the color of all text between pink and blue.

Use the String fontcolor() Method

In this section, we will learn about the fontcolor() method. We can apply the fontcolor() method on any text string, and it returns the <font> HTML element with the color attribute.

Users can follow the below syntax to use the fontcolor() method.

Syntax

let text = "some text";
text.fontcolor("color");

Parameters

color − It is a color code or color name

Return values

The fontcolor() method returns the <font> HTML element.

<font color="color"> some text </font>

Example

In the below example, we will change the color of a particular string using String fontcolor() method.


<html>
<head>
   <style>
      button {
         height: 30px;
         width: 100px;
      }
   </style>
</head>
<body>
   <h2> Change the font color using JavaScript.</h2>
   <div> Click the button to change the color of below text using <i>
   fontcolor() </i> method.</div>
   <div id="fonts"> hello world!</div>
   <button onclick = "changeFontColor()" id = "btn">change color</button>
   <script>

      // function to change the font color of button
      function changeFontColor() {
         let fontsDiv = document.getElementById("fonts");
         let string = "hello world";
         fontsDiv.innerHTML = string.fontcolor("green");
      }
</script>
</body>
</html>

In the output, users can observe that when they clicks the button, font of the “hello world” changes to the green.

In this tutorial, we have learned to change the all text of the body with a single click. Also, we learned to change the color of the text of a single element using the style attribute of the element. In the last section, we have learned about the fontcolor() method which is deprecated so it is not recommended to use.