How to change style attribute of an element dynamically using JavaScript ?
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:
- Select the element whose style properties needs to be change.
- 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 changing the color and background-color of heading element.
<!DOCTYPE HTML> < html > < head > < title > How to change style attribute of an element dynamically using JavaScript ? </ title > </ head > < body style = "text-align:center;" id = "body" > < h1 id = "h1" style = "color:green;" > GeeksforGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;" > </ p > < button onclick = "gfg_Run()" > Click here </ button > < p id = "GFG_DOWN" style = "font-size: 23px; font-weight: bold; color: green; " > </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var heading = document.getElementById("h1"); el_up.innerHTML = "Click on the button to " + "change the style attribute"; function gfg_Run() { heading.style["background-color"] = "green"; heading.style["color"] = "white"; el_down.innerHTML = "Style Attribute Changed"; } </ script > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button:
Example 2: This example changing the color, background-color and width property of elements.
<!DOCTYPE HTML> < html > < head > < title > How to change style attribute of an element dynamically using JavaScript ? </ title > </ head > < body > < center > < h1 id = "h1" style = "color:green;" > GeeksforGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 15px; font-weight: bold;" > </ p > < button onclick = "gfg_Run()" > Click here </ button > < p id = "GFG_DOWN" style = "font-size: 23px; font-weight: bold; color: green; " > </ p > < script > var el_up = document.getElementById("GFG_UP"); var el_down = document.getElementById("GFG_DOWN"); var heading = document.getElementById("h1"); el_up.innerHTML = "Click on the button to " + "change the style attribute"; function gfg_Run() { heading.style["color"] = "white"; heading.style["background-color"] = "green"; heading.style["width"] = "300px"; heading.style["border"] = "1px solid black"; el_up.style["background-color"] = "green"; el_up.style["width"] = "400px"; el_up.style["border"] = "1px solid black"; el_down.innerHTML = "Style Attribute Changed"; } </ script > </ center > </ body > </ html > |
Output:
- Before clicking on the button:
- After clicking on the button: