Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to change the font color of a text using JavaScript?
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.
34K+ Views
To Continue Learning Please Login