How to Change the Color of HTML Element in JavaScript ?

Last Updated : 28 Dec, 2023

Changing the color of an HTML element dynamically in JavaScript improves the user experience. To change the color of an HTML element with JavaScript, we use the DOM to access and modify its style properties, allowing for dynamic color changes. In this article, we will see how to change the HTML Element’s color using Javascript, along with understanding the different approaches for implementing it.

Syntax:

element.style.color = "green";

Steps:

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.

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() {
            var gfg = document.getElementById("gfg");
            gfg.style.color = "green";
        }
    </script>
</body>
 
</html>

Output:

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

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() {
            var gfg = document.getElementById("gfg");
            var selectColor =
                document.getElementById("selectColor");
 
            // From the drop-down menu, obtain 
            // the value of the chosen color.
            var 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>