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

无法使用javascript更改背景图像

1 个答案: