javascript - 单击时按钮背景更改

Question

我正在尝试为我的 HTML5 音频播放器创建自定义控件。

目前，我有我的播放/暂停按钮，但是，在单击按钮时，我想将当前播放背景更改为暂停符号。

JS 完美运行，只是不知道如何切换背景。

HTML5：

<div id="myButtons">
<button id="playpause" title="play" onclick="togglePlayPause()"></button>
<input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" />
<button id="mute" onclick="toggleMute()">Mute</button>
</div>

Javascript：

function togglePlayPause() {
   var playpause = document.getElementById("playpause");
   if (audio.paused || audio.ended) {
      playpause.title = "";
      playpause.innerHTML = "";
      audio.play();
   }
   else {
      playpause.title = "";
      playpause.innerHTML = "";
      audio.pause();
   }

Answer 1

尝试这个

function togglePlayPause() {

       var playpause = document.getElementById("playpause");

       if (audio.paused || audio.ended) {
          playpause.style.backgroundImage="url(play.png)";
          playpause.title = "";
          playpause.innerHTML = "";
          audio.play();
       }
       else {
          playpause.style.backgroundImage="url(pause.png)";
          playpause.title = "";
          playpause.innerHTML = "";
          audio.pause();
       }
}

Answer 2

如果您只添加一些类可能会更好：

.button-icon-play {
  background: url(...) /*other background styling stuff*/;
}

.button-icon-pause {
  background: url(...) /*other background styling stuff*/;
}

默认情况下将其添加button-icon-play到您的元素中，然后在您的 JS 中，只需执行以下操作：

/*Switch to pause button*/
playpause.className = 'button-icon-pause';

/*Switch to play button*/
playpause.className = 'button-icon-play';

Answer 3

您可以使用 jquery 设置 css 值

var playpause = $("#playpause");
var foo = false;

    playpause.click(function(){
        if(foo===false){
        playpause.css("background", pause-background-url);
         foo=true;
        }
        else{
          foo=false;
         playpause.css("background", play-background-url);
        }
    }};