Javascript 单击按钮时更改div的CSS

当选择div外部的按钮时，是否可以更改div的背景图像

e、 g

HTML

单击按钮2时所需的效果（每个按钮相同；3=there.jpg，4=then.jpg）

---

使用javascript可以设置

背景图像

。使用jQuery，您将使用

$.css（'background-image'）

您还可以使用JS/jQuery向元素添加一个类，并且可以在CSS中为该类设置
背景图像


document.getElementById（'button'）.addEventListener（'click'，function（）{
document.getElementById（'change'）.style.backgroundImage='url(https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg)';
})
#更改{
背景：#eee；
宽度：600px；
身高：375px；
}
按钮
您可以这样做，但需要JavaScript：

您的HTML：


这
那个
那里
然后
功能更改BG（图像）{
var urlString=“url（“+image+”）；
document.getElementById（'change'）.style.backgroundImage=urlString；
}

这不是最漂亮的方法，但它应该可以帮助您开始工作。
这就是jQuery:D中所需要的

$('#buttons button').on('click',function() {
    var val = $(this).text();
    $('#change').css('background-image','url('+val+'.jpg)');
});

将脚本放入
$（document）.ready（function（）{
.css（“背景图像”，…）
中。
#change{
  background-image: url("this.jpg")
}

#change{
  background-image: url("that.jpg")
}

<div id="buttons">
  <button class="button1" onclick="changeBG('image1.jpg')">this</button>
  <button class="button2" onclick="changeBG('image2.jpg')">that</button>
  <button class="button3" onclick="changeBG('image3.jpg')">there</button>
  <button class="button4" onclick="changeBG('image4.jpg')">then</button>
</div>

<script>
  function changeBG(image) {
    var urlString = "url(" + image + ")";
    document.getElementById('change').style.backgroundImage = urlString;
  }
</script>

$('#buttons button').on('click',function() {
    var val = $(this).text();
    $('#change').css('background-image','url('+val+'.jpg)');
});