按钮改变div盒子的颜色 html怎么让按钮变色

温馨提示：这篇文章已超过230天没有更新，请注意相关的内容是否还可用！

按钮改变div盒子的颜色可以通过JavaScript来实现。我们需要给按钮添加一个点击事件，当按钮被点击时，将触发一个函数来改变div盒子的颜色。

示例代码如下：


<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 100px;
  background-color: red;
}
</style>
</head>
<body>
<button onclick="changeColor()">点击改变颜色</button>
<div id="myDiv"></div>
<script>
function changeColor() {
  var div = document.getElementById("myDiv");
  div.style.backgroundColor = "blue";
}
</script>
</body>
</html>

在这个示例中，我们首先定义了一个红色的div盒子，并给它一个id为"myDiv"。然后，我们创建了一个按钮，当按钮被点击时，会触发名为"changeColor()"的函数。

在JavaScript函数中，我们首先使用`document.getElementById("myDiv")`来获取到id为"myDiv"的div元素。然后，我们通过修改div元素的`style.backgroundColor`属性来改变div盒子的背景颜色，将其设置为蓝色。

通过这样的方式，当按钮被点击时，div盒子的背景颜色就会改变为蓝色。

这个示例中使用了JavaScript的DOM操作来修改HTML元素的样式。DOM（Document Object Model）是一种用于访问和操作HTML文档的标准编程接口。通过使用DOM，我们可以通过JavaScript来修改HTML元素的属性和样式，实现动态的效果。

除了修改背景颜色，我们还可以通过类似的方式来改变其他样式属性，比如字体颜色、边框样式等。通过结合JavaScript和CSS，我们可以实现更加丰富的交互效果和用户体验。

按钮改变div盒子的颜色 html怎么让按钮变色

相关阅读