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.
To begin, we must decide which HTML element we want to focus on. This can be accomplished by selecting the element using various techniques such as getElementById, getElementsByClassName, or querySelector. Once we have a reference to the desired element, we can use the style attribute to access its CSS properties, specifically the color attribute.
The getElementById() returns an element based on its unique ID. You can use it to specify which element you want to change, and the style.color is used to modify the color of an element by accessing its style property. You can change the color of the element’s text by changing the value of the color property.
Syntax:
element.style.color = "green";
Approach 1: In this approach, we’ve embedded the JavaScript code directly in the HTML document using a <script> tag in the <body> section. The changeColor() function selects the “gfg” element using document.getElementById() and sets the style.color property to “green”. We’ve also added a button element with an onclick attribute that calls the changeColor() function when clicked. In the button, we added some animation when we hover over the button it translates to 0px, -5px.
Example: This example illustrates modifying the color of the HTML Element by implementing the getElementById() Method in Javascript.
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:
Approach 2: In this approach, we’ve added a dropdown menu with some color options: black, red, green, blue, cyan, mint leaf, and pink. The changeColor() function is called when the user selects a new color from the dropdown menu, using the onchange attribute of the <select> element. The function selects the “gfg” element using document.getElementById(), and the dropdown menu using document.getElementById() with the “selectColor” id. It then retrieves the selected color value using the selectedIndex property of the <select> element and sets the font color of the “gfg” element to the selected color using the style.color property.
Example: 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> |
Output:
