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!
I’m Edward Anderson. My current job is as a programmer. I’m majoring in information technology and 5 years of programming expertise. Python, C, C++, Javascript, Java, HTML, CSS, and R are my strong suits. Let me know if you have any questions about these programming languages.
Name of the university: HCMUT
Major: CS
Programming Languages: Python, C, C++, Javascript, Java, HTML, CSS, R