使用 JavaScript 更改 Div 样式，而无需重新加载页面

Change Div Style by using JavaScript without page reloading

本文关键字：新加载 加载 Div 更改 JavaScript 样式 使用      更新时间：2023-09-26

我尝试使用 JavaScript 更改div 的背景颜色，但更改没有应用，因为当我按下按钮时浏览器会重新加载页面并恢复为默认设置，而无需更改。

如何在不重新加载页面或应用更改的情况下更改div 的背景颜色？

下面是一些使用 jQuery 的代码，无需重新加载即可更改背景：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Changing DIV Background Color</title>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <style>
  #changing_background {
    background-color: red;
    min-height: 200px;
  }
  </style>
</head>
<body>
<div id="changing_background"></div>
<button id="change_background">Click Me</button>
<script>
  $("#change_background").click(function(e){
    $("#changing_background").css("background-color", "blue");
  });
</script>
</body>
</html>

页面重新加载，因为您的按钮位于表单内，当您单击它时 - 您提交表单。

在onclick函数中，您需要阻止默认操作，只需以以下结尾：

return false;

如果您询问原因：submit默认按钮类型：

按钮类型：

    提交
  • ：该按钮将表单数据提交到服务器。如果未指定属性，或者属性为动态更改为空值或无效值。
  • 重置：该按钮将所有控件重置为其初始值。
  • 按钮：按钮没有默认行为。它可以具有与元素的事件关联的客户端脚本，这些事件是事件发生时触发。

推荐阅读：

  • HTML 按钮元素
  • 如何防止按钮提交表单
相关文章：