在JavaScript中,如何在点击按钮后改变背景颜色

在JavaScript中,如何在点击按钮后改变背景颜色

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

方法1:这种方法使用JavaScript来改变点击按钮后的背景颜色。使用HTML DOM Style backgroundColor属性来改变点击按钮后的背景颜色。该属性用于设置一个元素的背景颜色。

例子:这个例子在JavaScript的帮助下改变背景颜色。

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to change the background color
        after clicking the button ?
    </title>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <p id="GFG_UP" style="font-size: 16px;
                          font-weight: bold;">
    </p>
  
    <button onclick="gfg_Run()">
        Click here
    </button>
  
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px;
                            font-weight: bold;">
    </p>
  
    <script>
        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";
        }        
    </script>
</body>
  
</html>

输出:

在JavaScript中,如何在点击按钮后改变背景颜色?

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

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

例子:这个例子在JQuery的帮助下改变背景颜色。

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        How to change the background color after
        clicking the button in jQuery ?
    </title>
  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
    </script>
</head>
  
<body style="text-align:center;">
  
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
  
    <p id="GFG_UP" style="font-size: 16px; 
                          font-weight: bold;">
    </p>
  
    <button>
        Click here
    </button>
  
    <p id="GFG_DOWN" style="color:green; 
                            font-size: 20px; 
                            font-weight: bold;">
    </p>
  
    <script>
        ('#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!");
        });
    </script>
</body>
  
</html>

输出:

在JavaScript中,如何在点击按钮后改变背景颜色?

JavaScript在网页开发中最为出名,但它也被用于各种非浏览器环境。你可以通过学习这个JavaScript教程和JavaScript实例,从基础开始学习JavaScript

jQuery是一个开源的JavaScript库,它简化了HTML/CSS文档之间的交互,它以其 “少写多做 “的理念而广为人知。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程