Question

我想通过在按钮点击上使用Javascript设置CSS规则来更改容器的背景图像。

这样可行，但图像几乎立即变回。有没有办法保持变化？

HTML：

<body>
  <div id="knoppen">
    <div class="roundbutton" onclick="ImageChange1();" style="background-image:url(Image_Thumb.jpg); background-position: center; background-size: cover;">
      <a href="" class="buttonlink"></a>
    </div>

    <div class="roundbutton" onclick="ImageChange2();" style="background-image:url(.png); background-position: center; background-size: cover;">
      <a href="" class="buttonlink"></a>
    </div>

    <div class="roundbutton" onclick="ImageChange3();" style="background-image:url(.png); background-position: center; background-size: cover;">
      <a href="" class="buttonlink"></a>
    </div>

    <div class="roundbutton" onclick="ImageChange4();" style="background-image:url(.png); background-position: center; background-size: cover;">
      <a href="" class="buttonlink"></a>
    </div>

    <div class="roundbutton" onclick="ImageChange5();" style="background-image:url(.png); background-position: center; background-size: cover;">
      <a href="" class="buttonlink"></a>
    </div>
  </div>
</body>

JS：

function ImageChange1() {
  document.getElementById("container").style.backgroundImage = "url('Image1.jpg')";
}

function ImageChange2() {
  document.getElementById("container").style.backgroundImage = "url('Image2.jpg')";
}

function ImageChange3() {
  document.getElementById("container").style.backgroundImage = "url('Image1.jpg')";
}

function ImageChange4() {
  document.getElementById("container").style.backgroundImage = "url('Image1.jpg')";
}

function ImageChange5() {
  document.getElementById("container").style.backgroundImage = "url('Image1.jpg')";
}

Answer 1

首先：这几乎是不可能的，因为没有container div。其次：你不需要四种不同的功能来使它工作。就这样做一个：

function changeBackgroundImage(id){ 
   var d = document.getElementById("container"); 
   d.className = "image"+id;
}

现在你可以通过这样做在HTML中调用它： onclick="changeBackgroundImage(idofyourtype); return false;"

然后添加一个新的CSS类，其中包含如下图像：

#container.image1{
 background-image: url('pathtoimage');
}

等。

CodePen example

Answer 2

这是一个更简单的选择：

＆＃13;

var container = document.getElementById('container'),
    buttons   = document.getElementsByClassName('roundbutton');

for(var i = 0, l = buttons.length; i < l; i++ ){
    buttons[i].addEventListener('click', changeImage);
}

function changeImage(){
    var url = this.getAttribute('data-img');
    container.style.backgroundImage = 'url(' + url + ')';
}

＆＃13;

/* Just some styles for the demo */ #knoppen{padding:.5em;background:#ededff;text-align:center}.roundbutton{border-radius:.2em;padding:1em 1.5em;margin:.2em .5em;background:center #bbb;display:inline-block;cursor:pointer;background-size:cover;-webkit-transition:all .2s;-moz-transition:all .2s;transition:all .2s}.roundbutton:nth-child(1){background-image:url(http://tiny.cc/5iluvx)}.roundbutton:nth-child(2){background-image:url(http://tiny.cc/sjluvx)}.roundbutton:nth-child(3){background-image:url(http://tiny.cc/5jluvx)}.roundbutton:nth-child(4){background-image:url(http://tiny.cc/hkluvx)}.roundbutton:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);transform:scale(1.2);box-shadow:0 0 0 .12em #f24e0d}#container{width:15.8em;margin:0 auto;height:7em;background:url(http://tiny.cc/5iluvx) center #bbb;background-size:cover;border-radius:.2em}

＆＃13;

<div id="knoppen">
    <div class="roundbutton" data-img="http://tiny.cc/5iluvx"></div>
    <div class="roundbutton" data-img="http://tiny.cc/sjluvx"></div>
    <div class="roundbutton" data-img="http://tiny.cc/5jluvx"></div>
    <div class="roundbutton" data-img="http://tiny.cc/hkluvx"></div>
    <div id="container"></div>
</div>

＆＃13;

在这里，我使用包含图片网址的属性data-img。点击蓝色按钮试试吧。请注意，我从HTML中删除了CSS以使代码更易于阅读（您不必）并删除了链接（您是否需要它们？）。

JavaScript在HTML中保持图像更改

2 个答案: