How to change text color on click using JavaScript

You will know how to change text color on click using JavaScript using a couple of methods, namely style.color property, and setAttribute(). This is one of the most important skills when you work with elements’ content in Javascript.

Change text color on click using JavaScript

Using style.color property

Syntax:

element.style.color

This is not a method or function; instead, it is an attribute that belongs to every HTML element (DOM). It can help you change the color (text) inside the element on which you are calling the attribute. For example:

<html>
  <body>
    <h1 onclick="this.style.color = 'red'">LearnShareIT</h1>
  </body>
</html>

Output:

The example above shows that we have added the attribute “onclick” of the h1 tag equals to the statement “this.style.color = ‘red’”. It means that whenever the tag is clicked (the “onclick” event fires), its text color will be changed to “red”. If you click on the heading, you will see the change. However, if you don’t want to change text color on clicking the text, but you want to change when clicking the button, then you can create a new button whose “onclick” attribute is as follows:

<html>
  <body>
    <h1 id="target">LearnShareIT</h1>
    <button onclick="changeTextColor()">Change text color to red</button>
    <script>
      function changeTextColor() {
        // Get the target text you want to change
        let target = document.getElementById("target");

        // Change text color to red
        target.style.color = "red";
      }
    </script>
  </body>
</html>

Output:

As can be seen, the heading’s text color only changed when we clicked the button instead of clicking the text. We have created a function that changes the property “style.color” of the element to the color we want. If you want to change the style of all text in your document, you should visit here to read more about that.

Using setAttribute()

This is a built-in method which is able to change the attributes’ values such as “style”, “id”, “class” or “onclick”. Here is the syntax and usage of the setAttribute() method:

Syntax:

setAttribute(attributeName, value)

Parameter:

  • attributeName: The name of the attribute you want to set or change
  • value: the value of the attribute you want to set or change
<html>
  <body>
    <h1 id="target" style="font-size: 300%">LearnShareIT</h1>
    <button id="myButton">Change text color to red</button>
    <script>
      // Get the button and make it change text color on click
      let myButton = document.getElementById("myButton");

      // Execute changeTextColor() when the button is clicked
      myButton.setAttribute("onclick", "changeTextColor()");

      // Define the function used to change text
      function changeTextColor() {
        // Get the target text you want to change
        let target = document.getElementById("target");

        // Change text color to red
        target.setAttribute("style", "color : red");
      }
    </script>
  </body>
</html>

Result:

As you can see, this method is also able to change the text color of the heading to red, the same as the previous approach. However, it will overwrite the old “style” attribute of that element with the new “style” value that you provide in the method. Therefore, the heading is no longer 300% in size; these old settings of the style attribute have been replaced as you are using the setAttribute() method. If you don’t want this to happen, you should use the first approach to keep these old styles but only change what you need.

Summary

We have learned to change text color on click using JavaScript in two different ways. We recommend you use the first solution because it is simpler and safer. If you have any questions, please leave us a reply below and we will answer soon. Have a nice day!

Leave a Reply

Your email address will not be published. Required fields are marked *