How to Change the Color of HTML Element in JavaScript?

Last Updated : 07 Oct, 2024

Changing the text color of an HTML element in JavaScript improves the user experience. To change the font color of an HTML element using JavaScript, we use the DOM to access and modify its style properties, allowing for dynamic color changes.

Syntax:

element.style.color = "green";

Approach

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() {
            let 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() {
            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>