How to change style attribute of an element dynamically using JavaScript ?

Last Updated : 05 Sep, 2019

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:

My Personal Notes

Related Articles