HTML 如何使用JavaScript更改div的背景图片

在本文中，我们将介绍如何使用JavaScript来更改HTML中div元素的背景图片。

阅读更多：HTML 教程

步骤一：HTML结构和CSS样式

首先，我们需要一个HTML文档，并在其中创建一个div元素。例如：

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  width: 300px;
  height: 200px;
  background-image: url("original_image.jpg");
  background-size: cover;
}
</style>
</head>
<body>

<div id="myDiv"></div>

</body>
</html>

在上面的示例中，我们创建了一个id为”myDiv”的div元素，设置了它的宽度为300像素，高度为200像素，并将其背景图片设置为”original_image.jpg”。我们还使用CSS的background-size属性来设置背景图片的尺寸。

步骤二：编写JavaScript函数

接下来，我们需要编写一个JavaScript函数来更改div的背景图片。我们将使用DOM（Document Object Model）来访问和操作HTML元素。

<script>
function changeBackground() {
  var div = document.getElementById("myDiv");
  div.style.backgroundImage = "url('new_image.jpg')";
}
</script>

在上面的示例中，我们创建了一个名为”changeBackground”的函数。函数内部首先使用document.getElementById方法获取id为”myDiv”的div元素，然后通过设置它的style.backgroundImage属性来更改背景图片为”new_image.jpg”。

步骤三：调用JavaScript函数

最后，我们需要在HTML中调用JavaScript函数，以触发更改背景图片的操作。

<button onclick="changeBackground()">点击更改背景图片</button>

在上面的示例中，我们创建了一个按钮元素，并将onclick事件绑定到我们之前编写的JavaScript函数”changeBackground”上。

示范完整代码

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  width: 300px;
  height: 200px;
  background-image: url("original_image.jpg");
  background-size: cover;
}
</style>
<script>
function changeBackground() {
  var div = document.getElementById("myDiv");
  div.style.backgroundImage = "url('new_image.jpg')";
}
</script>
</head>
<body>

<div id="myDiv"></div>

<button onclick="changeBackground()">点击更改背景图片</button>

</body>
</html>

总结

通过以上步骤，我们可以使用JavaScript轻松地更改HTML中div元素的背景图片。首先，我们在CSS中设置了div的初始背景图片。然后，通过编写JavaScript函数并使用DOM来访问和操作HTML元素，我们可以在需要的时候更改div的背景图片。最后，我们通过在HTML中调用JavaScript函数来触发更改操作。这样，我们就能够实现动态更改div背景图片的功能。