javascript - 无法使用javascript更改背景图像

Question

我正在尝试更改 background image 单击 play 按钮时，背景图像应该更改为 pause，反之亦然。现在我可以播放和暂停音乐，但我不能改变图像。谁能告诉我问题出在哪里？这是我的代码:

function initAudioPlayer() {
    audio_0 = new Audio();
    audio_0.src = "audio/footprint.mp3";

    //set object reference
    playbtn0 = document.getElementById("audio-play-images-0");
    forwardbtn0 = document.getElementById("audio-next-images-0");
    backbtn0 = document.getElementById("audio-prev-images-0");

    //add event handling
    playbtn0.addEventListener("click", playPause);
    forwardbtn0.addEventListener("click", playForward);
    backbtn0.addEventListener("click", playBack);
}

function playPause() {
    if (audio_0.paused) {
        audio_0.play();
        playbtn0.style.backgroundImage = 'url(../img/pause-on.png)';
    } else {
        audio_0.pause();
        playbtn0.style.backgroundImage = "url('../img/play-on.png')";
    }
}

HTML

<div class="audio-controls">
     <div id="audio-prev-images-0"></div>
     <div id="audio-play-images-0"></div>
     <div id="audio-next-images-0"></div>
</div>

Answer 1

如果 css 中有 background-image 属性，那么它需要被覆盖，所以你的 playbtn0.css.backgroundImage = url(yourpath/img) 将覆盖已经在CSS。

然后您应该会看到不同之处。您还应该确保 css 的背景大小为 contain 以使其适合。

编辑:这最初被标记为 jquery - 使用 .style