How to change style attribute of an element dynamically using JavaScript ? Last Updated : 03 Aug, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report Given an HTML document and the task is to change the style properties (CSS Properties) of an element dynamically with the help of JavaScript. Approach: Using element.style PropertyThe element.style property is represented by the CSSStyleDeclaration object, which is returned via the style property. Select the element whose style properties need to be changed.Use element.style property to set the style attribute of an element.Set the properties either by using bracket notation or dash notation.Example 1: This example changes the color and background color of the heading element. html <!DOCTYPE html> <html> <body> <h1 id="h1" style="color:green;"> GeeksforGeeks </h1> <p> Click on the button to change the style attribute </p> <button onclick="gfg_Run()"> Click here </button> <p id="result"></p> <script> let res = document.getElementById("result"); let heading = document.getElementById("h1"); function gfg_Run() { heading.style["background-color"] = "green"; heading.style["color"] = "white"; res.innerHTML = "Style Attribute Changed"; } </script> </body> </html> Output How to change style attribute of an element dynamically using JavaScript ?Example 2: This example changes the color, background color, and width properties of elements. html <!DOCTYPE html> <html> <body> <h1 id="h1" style="color:green;"> GeeksforGeeks </h1> <p id="para"> Click on the button to change the style attribute </p> <button onclick="gfg_Run()"> Click here </button> <p id="result"></p> <script> let heading = document.getElementById("h1"); let para = document.getElementById("para"); let res = document.getElementById("result"); function gfg_Run() { heading.style["color"] = "white"; heading.style["background-color"] = "green"; heading.style["width"] = "300px"; heading.style["border"] = "1px solid black"; para.style["background-color"] = "green"; para.style["width"] = "400px"; para.style["border"] = "1px solid black"; res.innerHTML = "Style Attribute Changed"; } </script> </body> </html> Output: How to change style attribute of an element dynamically using JavaScript ? Comment More infoAdvertise with us Next Article How to Change the src Attribute of an Image Element in JavaScript / jQuery? P PranchalKatiyar Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to change style/class of an element using JavaScript ? In this article, we will learn how we can change the style/class of an element. If you want to build a cool website or app then UI plays an important role. We can change, add or remove any CSS property from an HTML element on the occurrence of any event with the help of JavaScript. There are two com 4 min read How to Change the ID of Element using JavaScript? We are given an element and the task is to change the ID of elements using JavaScript. ID is unique for any element and it can be assigned to an element only once. JavaScript provides a method to access this id and also to manipulate the id. Syntax:Selected_element.id = newID;Below are the appraoche 2 min read How to Change the src Attribute of an Image Element in JavaScript / jQuery? To change the src attribute of an image element in JavaScript or jQuery, you can dynamically update the image by setting a new value for the src attribute.Below are the methods to change the src attribute of an image element:Table of ContentUsing JavaScript DOM methodsUsing jQuery prop() MethodUsing 2 min read How to add/update an attribute to an HTML element using JavaScript? To add/update an attribute to an HTML element using JavaScript, we have multiple approaches. In this article, we are going to learn how to add/update an attribute to an HTML element using JavaScript. Below are the approaches used to add/update an attribute to an HTML element using JavaScript: Table 2 min read How To Set Custom Attribute Using JavaScript? In modern web development manipulating HTML elements dynamically is a common requirement. One such task is setting custom attributes on elements to store additional data or metadata. Custom attributes referred to as data attributes allow developers to attach extra information to elements. In this ar 2 min read How to set the color of an element border with JavaScript ? In this article, we will see how to set the color of an element's border with JavaScript. To set the color of an element's border with JavaScript, we can use the element's style property. Method 1: First, we will create a text element and then apply some CSS styles including the border color of the 2 min read Like