“隐藏/显示”元素和更改按钮背景-图像

Question

此代码仅用于隐藏/显示(Iamhiden)。

HTML:

 <nav id="Iamhiden"></nav>
 <button id="THeSummoner" onclick="toggle_visibility('Iamhiden');"></button>

CSS:

 #Iamhiden{}
 #THeSummoner{
      width: 30px;
      height: 30px;
      background-image: url(../Images/mobile-icon-1.png);
      background-repeat: no-repeat;
      margin: 22px 0px auto 0px;
      padding: 0;
      border-style: none;
      list-style: none;
      background-color: transparent;
}

JS:

function toggle_visibility(Iamhiden) {
   var e = document.getElementById(Iamhiden);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}    

https://app.box.com/s/qy27mxja53tzucyzijbbiuhmd29bn40i https://app.box.com/s/8rom8cax3esmws62aj64p5yhwkeass8k

但我不想让它隐藏/显示(Iamhiden)，我只想让它改变背景图像(THeSummoner)。

JS-2：

function toggle_visibility(Iamhiden) {
   var e = document.getElementById(Iamhiden);
   if(e.style.display == 'block')
      e.style.display = 'none';
      **document.getElementById(THeSummoner).style.background-image=url(../Images/mobile-icon-1.png);**
   else
      e.style.display = 'block';
      document.getElementById(THeSummoner).style.background-image=url(../Images/xmnu.png);
}

我尝试了JS-2，但是它根本不起作用。

Answer 1

没有THeSummoner变量，因此必须将元素Id指定为字符串，而不是变量：

document.getElementById('THeSummoner')

现在您可以更改元素的背景图像如下：

document.getElementById('THeSummoner').style.backgroundImage = "url('type_path_here')";

下面是一个例子：http://jsfiddle.net/42joe84p/2/