javascript - "hiding/showing"元素和更改按钮背景图像

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/