如何使用 JavaScript 动态更改元素的样式属性？

给定一个 HTML 文档，任务是在 JavaScript 的帮助下动态更改元素的样式属性（CSS 属性）。

方法：

• 选择需要更改样式属性的元素。
• 使用element.style属性设置元素的样式属性。
• 使用括号表示法或破折号表示法设置属性。

示例 1：此示例更改标题元素的颜色和背景颜色。

 
 
  
 
     
        How to change style attribute of an element
        dynamically using JavaScript ?
    
 
  
 
      
     
        GeeksforGeeks 
    
      
    
    
          
     
        Click here
    
      
    
    
      
    
        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";
        }         
     
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：
  

示例 2：此示例更改元素的颜色、背景颜色和宽度属性。

 
 
  
 
     
        How to change style attribute of an element
        dynamically using JavaScript ?
    
 
  
 
    
         
            GeeksforGeeks 
        
          
        
        
              
         
            Click here
        
          
        
        
          
        
            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";
            }         
         
    
 
  

输出：

• 在点击按钮之前：
  
• 点击按钮后：