How to Change the Color of HTML Element in JavaScript?

Last Updated : 23 May, 2025

Changing the text color of an HTML element using JavaScript enhances the user experience by making content more interactive and visually engaging. By accessing and modifying the element's style properties through the DOM, we can dynamically update font colors based on user actions or events. For example, changing a warning message to red when a form is 80% completed can help guide the user effectively.

Syntax:

element.style.color = "blue";

Steps to Change the Color of an HTML Element

Select the Target Element: Use methods like getElementById, getElementsByClassName, or querySelector to obtain a reference to the HTML element you want to modify.
Access the Style Property: Use the style attribute of the selected element to access its CSS properties, providing a gateway to dynamic styling.
Modify the Color Attribute: Specifically, target the color attribute within the element's style property to dynamically adjust the text color using JavaScript.

Example 1: This example illustrates modifying the color of the HTML Element by implementing the getElementById() Method.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Change Font Color</title>
    <style>
        button {
            margin-top: 0.5rem;
            padding: 10px 10px 10px 10px;
            background: crimson;
            color: white;
            border: none;
            border-radius: 6px;
            transition: all linear 0.5s;
            cursor: pointer;
        }
        button:hover {
            transform: translate(0px, -5px);
        }
    </style>
</head>
<body>
    <div id="gfg">
        <h1>
              Welcome To GeeksForGeeks!!
          </h1>
    </div>
    <button onclick="changeColor()">
          Change Color
      </button>
  
    <script>
        function changeColor() {
            let gfg = document.getElementById("gfg");
            gfg.style.color = "green";
        }
    </script>
</body>
</html>

Output:

How-To-Change-the-Background-Color-of-HTML-Element-in-JavaScript — output

Note: If you want to learn Javascript Concept then check out this tutorial - Javascript Tutorial

Example 2: This example illustrates the change of color in the HTML Element by selecting the color from the dropdown using JavaScript.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>
        Change Font Color - Method 2
    </title>
    <style>
        body {
            margin: 10rem;
        }
    </style>
</head>
<body>
    <div id="gfg">
        <h1>
            Welcome To GeeksForGeeks!!
        </h1>
    </div>
    <label for="selectColor">
        Select a color:
    </label>
    <select id="selectColor" onchange="changeColor()">
        <option value="black">Black</option>
        <option value="crimson">Red</option>
        <option value="green">Green</option>
        <option value="#0984e3">Blue</option>
        <option value="cyan">Cyan</option>
        <option value="#00b894">Mint Leaf</option>
        <option value="#e84393">Pink</option>
    </select>
    <script>
        // Provide a function to modify the 
        // "gfg" element's font color.
        function changeColor() {
            let gfg = document.getElementById("gfg");
            let selectColor =
                document.getElementById("selectColor");
            // From the drop-down menu, obtain 
            // the value of the chosen color.
            let selectedColor =
            selectColor.options[selectColor.selectedIndex].value;
            // Set the font color of the "gfg" 
            // element to the selected color
            gfg.style.color = selectedColor;
        }
    </script>
</body>
</html>