September 12, 2021

How to Change Text Color in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to change text color in javascript. By default, the color of the text content is always black in the HTML, but we can change that color using CSS or javascript.

In CSS, we have a color property to change the font color of text content. In javascript, we can take advantage of same property to achieve our goal and change text color on button click. Each element has style property and this property contains all style-related properties such as color, backgroundColor, borderColor, etc.

In the following example, we have some random text content. We also have three buttons red, blue, and green. We want to change the color of text content depending upon which button is clicked. Please have a look over the code example and steps given below.

HTML & CSS

We have 6 elements in the HTML file (2 div, 3 button, and 1 p). The div element with a class of container is just a wrapper for the rest of the elements.

The 3 button elements have “Red”, “Blue”, and “Green” as their inner text.
The paragraph element contains some random text content. We will change its color on the button click.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  
  <div class="container">
    <div>
      <button id="btnRed">Red</button>
      <button id="btnBlue">Blue</button>
      <button id="btnGreen">Green</button>
    </div>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Tenetur beatae vel, impedit consequuntur harum animi quisquam enim ducimus aliquam expedita accusantium obcaecati fugit unde pariatur saepe alias dolore inventore non.</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

.container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

p {
    width: 40%;
    border: 1px solid black;
    padding: 10px;
    font-weight: bold;
    font-size: 18px;
}

button {
    padding: 10px 20px;
    margin: 5px;
}

Javascript

We have selected all 3 button elements and the paragraph element using the document.querySelector() method and stored them in btnRed, btnBlue, btnGreen, and content variables respectively.

We have attached a click event listener to all the button elements.
The paragraph element has style property. This property points to an object which contains all style-related properties. The color property is one of them. We will use this property to change the color of the text inside the paragraph element.
Upon click of the red button, we will change the text color to red.

Upon click of the blue button, we will change the text color to blue.
Upon click of the green button, we will change the text color to green.

let btnRed = document.querySelector('#btnRed');
let btnBlue = document.querySelector('#btnBlue');
let btnGreen = document.querySelector('#btnGreen');
let content = document.querySelector('p');

btnRed.addEventListener('click',() => content.style.color = 'red');
btnBlue.addEventListener('click',() => content.style.color = 'blue');
btnGreen.addEventListener('click',() => content.style.color = 'green');

You May Also Like: