How to change text color in JavaScript dynamically?

How to change text color in JavaScript dynamically?

by

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.color

Here’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 😊.

Leave a Comment