Question

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

e.g。

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>

Answer 2

你可以这样做，但它需要JavaScript：

您的HTML：

<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>

这不是最漂亮的方法，但它应该让你开始。

Answer 3

这是你在jQuery中所需要的：D

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

将脚本放在$(document).ready(function() {

中

单击按钮时更改div的CSS

3 个答案: