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();
       }
}