javascript - 单击按钮时更改 div 的 CSS

Question

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

例如

HTML

<div id="change"></div>

<div id="buttons">
   <button class="button1">this</button>
   <button class="button2">that</button>
   <button class="button3">there</button>
   <button class="button4">then</button>
</div>

CSS

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

单击按钮 2 时的预期效果(每个按钮都相同；3 = there.jpg，4 = then.jpg)

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

Answer 1

使用 javascript 你可以设置 backgroundImage。如果使用 jQuery，您将使用 $.css('background-image');

您还可以使用 JS/jQuery 为元素添加一个类，您可以在 CSS 中为该类设置 background-image。

document.getElementById('button').addEventListener('click',function() {
  document.getElementById('change').style.backgroundImage = 'url(https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg)';
})

#change {
  background: #eee;
  width: 600px;
  height: 375px;
}

<button id="button">button</button>
<div id="change"></div>

document.getElementById('button').addEventListener('click',function() {
  document.getElementById('change').classList.add('bg');
})

#change {
  background: #eee;
  width: 600px;
  height: 375px;
}
#change.bg {
  background-image: url(https://futurism.com/wp-content/uploads/2015/11/neildegrassetyson.jpg)
}

<button id="button">button</button>
<div id="change"></div>