Question

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

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

Answer 1

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

在onclick功能中，您需要阻止默认操作，只需结束：

return false;

如果你问为什么：submit是默认按钮类型：

按钮类型：


submit：该按钮将表单数据提交给服务器。 如果未指定属性，或者属性为，则为默认值   动态更改为空值或无效值。

reset：该按钮将所有控件重置为初始值。

按钮：该按钮没有默认行为。它可以具有与元素事件相关联的客户端脚本   事件发生时触发。

推荐读物：

Answer 2

这是一些使用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>

使用JavaScript更改Div Style而不重新加载页面

2 个答案: