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

style.backgroundColor 属性用于更改元素的颜色，并返回表示背景颜色的字符串值。透明是这些颜色属性的默认值。在这里，我们使用onclick事件使更改在点击按钮后生效。

正如我们所知，onclick事件仅在用户点击元素时发生，并且它是一个纯粹的JavaScript属性。每当您单击onclick事件时，它会执行一些操作，例如显示消息或将用户重定向到另一个页面。网站中应尽量少使用onclick事件，因为它可能会使用户困惑。因此，请明智地使用这些事件。

在本文中，我们将看到如何在JavaScript中点击按钮后更改背景颜色。

语法

以下是使用JavaScript点击按钮后更改背景颜色的语法-

document.getElementById('id').style.backgroundColor = 'color';

参数

backgroundColor - 用于改变背景颜色。
getElementById - 用于读取和编辑特定的HTML元素。
color - 用于定义显示的颜色。

步骤

按以下步骤更改JavaScript中点击按钮后的背景颜色：

步骤1 - 定义HTML文档的div id的样式，该样式在点击按钮后将更改背景颜色。对于DIV元素，我们定义了高度、宽度和背景颜色。
步骤2 - 在div部分下，我们定义了form、button和script元素。
步骤3 - 对于button元素，定义了changeBackgroundColor()方法。使用此方法，当我们按下按钮时，颜色将会改变。
步骤4 - 在changeBackgroundColor()方法中，明确指出了要执行方法功能的id和颜色。
步骤5 - style.backgroundColor是用于更改背景颜色的HTML DOM背景属性。
步骤6 - 单击按钮后，将触发onClick事件函数，并将颜色从白色更改为浅蓝色。

示例

在此示例中，我们将使用JavaScript在点击按钮后更改背景颜色。

<html>
<head>
   <style>
      #divsection {
         width: 650px;
         background-color: white;
         height: 500px;
      }
   </style>
</head>
<body>
   <h2>Changing the Background Color when we click on button</h2>
   <div id="divsection">
      <p> This is the demo text. </p>
      <button onclick="changeBackgroundColor()">
         Press it to change Background Color
      </button>
      <!-- Script functionality of backgroundColor property-->
      <script>
      function changeBackgroundColor() {
         document.getElementById("divsection").style.backgroundColor = "lightblue";
      }
      </script>
   </div>
</body>
</html>

使用jQuery改变背景颜色

请按照以下步骤使用jQuery在点击按钮后改变背景颜色：

步骤1 - 在头标签的Script部分定义jQuery的源。
步骤2 - 声明按钮元素，当我们按下按钮时将改变其颜色。
步骤3 - 在Script部分内，我们定义了背景颜色改变的jQuery功能。
步骤4 - 您可以使用jQuery选择器和CSS方法来更改所选元素的背景颜色。
步骤5 - 本示例将将背景颜色更改为红色，您可以使用点击事件处理程序来触发颜色更改。

示例

在此示例中，我们将使用jQuery在点击按钮后更改颜色的背景。

<html>
<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
   <h2>Changing the Background Color Using jQuery</h2>
   <button>Press it to change Background Color</button>
   <!--Defining the functionality of jQuery with background color property-->
   <script>
       $('button').on('click', function() {$ ('body').css('background', 'red');
      });
   </script>
</body>
</html>

在本文中，我们展示了如何在点击按钮后更改背景颜色，并提供了示例。我们在这里看到了两个不同的示例，第一个示例中，我们使用JavaScript在点击按钮后更改了背景颜色。在第二个示例中，我们使用jQuery在点击按钮后更改了背景颜色。