Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to change the font color of a text using JavaScript?
This tutorial teaches us to change the font color of text using JavaScript. While working with JavaScript and developing the frontend of an application, you may need to change the font color of text when an event occurs.
For example, if you have an application that can turn a device on or off with a button, you might want the button text to be green when the device is on and red when it's off. JavaScript provides several methods to accomplish this dynamic color changing.
Using the style Property
The most common approach is to access an element by its ID or class name and modify its style.color property. This method gives you direct control over the element's appearance.
Syntax
let element = document.getElementById('element_id');
element.style.color = colorCode;
Parameters
colorCode ? The new color value. It can be a color name (e.g., "red"), hexadecimal code (e.g., "#FF0000"), or RGB values (e.g., "rgb(255, 0, 0)").
Example
In this example, we create a button that toggles its text color between red and green when clicked:
<html>
<head>
<style>
button {
height: 40px;
width: 120px;
font-size: 14px;
}
</style>
</head>
<body>
<h2>Change the font color using JavaScript</h2>
<div>Click the button to toggle its text color between red and green</div>
<br>
<button onclick="changeFontColor()" id="btn">Change Color</button>
<script>
function changeFontColor() {
let button = document.getElementById("btn");
let currentColor = button.style.color;
if (currentColor === "red") {
button.style.color = 'green';
} else {
button.style.color = 'red';
}
}
</script>
</body>
</html>
Changing All Body Text Color
When implementing theme changes (like dark/light mode), you can change the color of all body text at once instead of modifying each element individually.
Syntax
document.body.style.color = color;
Example
This example demonstrates how to toggle the color of all text in the document body:
<html>
<head>
<style>
button {
height: 40px;
width: 150px;
font-size: 14px;
}
body {
color: blue;
}
</style>
</head>
<body>
<h2>Change All Text Color</h2>
<div>Click the button to toggle all body text color between blue and purple</div>
<p>This paragraph will also change color</p>
<button onclick="changeBodyColor()" id="btn">Toggle Body Color</button>
<script>
function changeBodyColor() {
let currentColor = document.body.style.color;
if (currentColor === "purple") {
document.body.style.color = 'blue';
} else {
document.body.style.color = 'purple';
}
}
</script>
</body>
</html>
Using the fontcolor() Method (Deprecated)
The fontcolor() method is a legacy string method that wraps text in a <font> tag with a color attribute. Note: This method is deprecated and should not be used in modern web development.
Syntax
let text = "some text";
text.fontcolor("color");
Return Value
Returns an HTML string with the deprecated <font> element:
<font color="color">some text</font>
Comparison of Methods
| Method | Use Case | Recommended |
|---|---|---|
element.style.color |
Single element styling | Yes |
document.body.style.color |
All body text styling | Yes |
fontcolor() |
Legacy string formatting | No - Deprecated |
Conclusion
Use the style.color property for modern JavaScript font color changes. The fontcolor() method is deprecated and should be avoided in favor of DOM manipulation techniques.
43K+ Views
