In this article, we will show you how to change text color with JavaScript dynamically.
Our comprehensive, step-by-step tutorial guides you through the process of using the DOM style property to easily update the color of any text element.
With clear explanations and examples, you will be able to add dynamic color changes to your web pages in no time.
So if you want to know the important details concerning this matter, keep reading!
Let’s start to discover how to change the color of text on your web page using JavaScript.
How to change the font color of a text with JavaScript?
JavaScript provides developers with the ability to dynamically manipulate HTML elements, including the option to change the color of text.
If you want to change the color of some text using JavaScript, you can do it by accessing the specific part you want to change and adjusting its appearance with CSS.
To change the color of text with JavaScript, you can make use of the following predefined JavaScript solutions:
Solution 1: Use the style property of HTML element with document.getElementById method
The basic way of changing text color in JavaScript is to use the style property to directly control how it looks.
By changing the color property, you can make the text change its color dynamically.
Syntax:
object.style.colorHere’s an example:
// Select the element with id "myElement"
var element = document.getElementById("myElement");
// Change the text color to blue
element.style.color = "blue";
In this example, we start by identifying a specific HTML element with the id attribute set to “myElement.”
We do this using the document.getElementById method.
Once we have found the element, we proceed to modify its appearance.
Specifically, we change the color of the text contained within the element to blue. We achieve this by setting the color property of the element’s style attribute to “blue.”
As a result, the text will be displayed in a vibrant blue color.
Here’s the complete code:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
</style>
</head>
<body>
<div class="center">
<h4 id="id">Welcome to Itsourcecode!</h4>
<button type="button" onclick="changeColor()">Click the button</button>
</div>
<script>
function changeColor() {
document.getElementById("id").style.color = "blue";
}
</script>
</body>
</html>
Output:
Solution 2: Use CSS
Another way to change the font color of text using JavaScript is to use CSS classes.
Here’s an example:
/* Define a CSS class for bluetext */
.blue-text {
color: blue;
}JavaScript code:
var element = document.getElementById('myElement');
element.classList.add('blue-text');In this example, we begin by creating a CSS class named “blue-text.” This class is responsible for setting the text color of an element to red.
Moving on to the JavaScript code, we use the document.getElementById method to locate the specific HTML element with the id “myElement.”
To change the text color within this element, we simply add the “blue-text” class to it using the classList.add method.
As a result, the text inside the element will be displayed in a vibrant blue color.
Solution 3: Changing text color with inline JavaScript
When using inline JavaScript, you can directly insert JavaScript code into an HTML document.
This allows you to easily change the text color by using the style attribute within the HTML tag.
<p style="color: blue;">This text is blue.</p>
Solution 4: Use querySelector() method
You can also use the document.querySelector method to find the first HTML element that matches a specific CSS selector.
By using the CSS selector “#myElement,” we locate the element with the id “myElement.”
Then, we change the font color of the text inside that element to blue by setting its color property to “blue” using the style property.
The querySelector() method is similar to getElementById(), but it allows us to select elements based on any valid CSS selector, not just the id attribute.
This flexibility is useful when we want to select elements based on other attributes or properties.
Here’s an example:
var element = document.querySelector("#myElement");
element.style.color = "blue";
Here’s the complete code:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
height: 100vh;
}
</style>
</head>
<body>
<div class="center">
<h4 id="myElement">Welcome to Itsourcecode!</h4>
<button type="button" onclick="changeColor()">Click the button</button>
</div>
<script>
function changeColor() {
var element = document.querySelector("#myElement");
element.style.color = "blue";
}
</script>
</body>
</html>
Output:
Conclusion
In conclusion, this article provides a comprehensive guide on how to change text color dynamically with JavaScript.
It presents various solutions, including using the style property with getElementById, applying CSS classes, using inline JavaScript, and utilizing the querySelector method.
By following the step-by-step instructions and examples provided, you can easily incorporate dynamic color changes into your web pages.
We are hoping that this article provides you with enough information that helps you understand the JavaScript change text color.
You can also check out the following article:
Thank you for reading itsourcecoders 😊.
Official documentation
Quick step-by-step summary (click to expand)
- Understand the goal. Read the article intro to know what change text color looks like and when to use it in your JavaScript code.
- Set up your JavaScript file. Create a new .js file or open the browser console. Have Node.js installed if the example runs server-side.
- Write the core logic. Follow the code block below. It shows the minimal working syntax to change text color.
- Test the result. Run the code in Node or your browser. Confirm the expected output prints or the DOM updates as described.
- Handle edge cases. Wrap risky code in try/catch. Check for undefined, null, and empty-array inputs before applying the fix in production.
Frequently Asked Questions
Is JavaScript still worth learning in 2026?
What is the difference between var, let, and const?
Which JavaScript version should I target in 2026?
What is the best free editor for JavaScript?
How do I run JavaScript locally vs in the browser?
What can I build with JavaScript for my BSIT capstone?
Caren Bautista
Technical Writer at PIES IT Solution
Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.
Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel
· View all posts by Caren Bautista →