在 JavaScript 中单击按钮后如何更改背景颜色？

给定一个 HTML 文档，任务是使用 JavaScript 和 jQuery 更改文档的背景颜色。

方法一：这种方法使用JavaScript来改变点击按钮后的背景颜色。
单击按钮后，使用 HTML DOM Style backgroundColor 属性更改背景颜色。此属性用于设置元素的背景颜色。

示例：此示例在 JavaScript的帮助下更改背景颜色。

 
 
     
         
            How to change the background color
            after clicking the button ?
        
     
      
    
           
         
            GeeksForGeeks 
         
          
             
        
          
         
            Click here
        
          
        
        
          
        
            var el_up = document.getElementById("GFG_UP");
            var el_down = document.getElementById("GFG_DOWN");
            var str = "Click on button to change the background color";
          
            el_up.innerHTML = str;
          
            function changeColor(color) {
                document.body.style.background = color;
            }
              
            function gfg_Run() {
                changeColor('yellow');
                el_down.innerHTML = "Background Color changed";
            }         
         
     
                    

输出：

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

方法二：这种方法使用jQuery来改变点击按钮后的背景颜色。

• text() 方法用于将文本内容设置为所选元素。
• on() 方法用作所选元素和子元素的事件处理程序。
• css() 方法用于更改/设置元素的背景颜色。

示例：此示例在 JQuery的帮助下更改背景颜色。

 
 
     
         
            How to change the background color after
            clicking the button in jQuery ?
        
          
        
        
     
      
    
           
         
            GeeksForGeeks 
         
          
             
        
          
         
            Click here
        
          
        
        
          
        
            $('#GFG_UP').text("Click on button to change the background color");
            $('button').on('click', function() {
                $('body').css('background', '#ccc');
                $('#GFG_DOWN').text("Background Color Changed!");
            }); 
         
     
                    

输出：

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

JavaScript 以网页开发而闻名，但它也用于各种非浏览器环境。您可以按照此 JavaScript 教程和 JavaScript 示例从头开始学习 JavaScript。

jQuery 是一个开源 JavaScript 库，它简化了 HTML/CSS 文档之间的交互，它以其“少写，多做”的理念而广为人知。
您可以按照此 jQuery 教程和 jQuery 示例从头开始学习 jQuery。