How to change style attribute of an element dynamically using JavaScript ? Last Updated : 03 Aug, 2023 Comments Improve Suggest changes 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 style attribute of an element dynamically using JavaScript ? 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 How to Change the Color of HTML Element in JavaScript? 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 exa 2 min read How to add CSS properties to an element dynamically using jQuery ? In this article, we will see how to add some CSS properties dynamically using jQuery. To add CSS properties dynamically, we use css() method. The css() method is used to change the style property of the selected element. The css() method can be used in different ways. This method can also be used to 1 min read How to select elements by data attribute using CSS? CSS provides a way to select HTML elements based on attributes and their values. This can be extremely helpful for targeting elements in a flexible and specific way. This enables fine-tuned control over styling elements in a webpage.Here are the different ways to select elements using attribute sele 2 min read How to change the href value of a tag after click on button using JavaScript ? JavaScript is a high-level, interpreted, dynamically typed, and client-side scripting language. HTML is used to create static web pages. JavaScript enables interactive web pages when used along with HTML and CSS. Document Object Manipulation (DOM) is a programming interface for HTML and XML document 4 min read Like