Html 单击按钮时更改字体真棒图标

发布于04月02日

我正在使用此代码播放/暂停背景音频.

        <div class="music-box">
            <audio id="losAudio" src="images/honcayeu.mp3"></audio>
            <button id="btn_playPause">
                <i class="fa fa-music"></i>
            </button>
        </div>

    var losAudio = document.getElementById("losAudio");
    function losAudio_playPause() {
        var isPaused = losAudio.paused;
        losAudio[isPaused ? "play" : "pause"]();
    }
    document.getElementById("btn_playPause").addEventListener("click", losAudio_playPause);

但现在我希望当点击按钮时，图标将变为暂停图标. 能告诉我一个简单的解决方案吗？谢谢

推荐答案

要在播放音频时将按钮的图标从fa-Music更改为fa-psusse，您可以修改您的losAudio_playPause函数以相应地更新按钮图标.

试试这个:

var losAudio = document.getElementById("losAudio");
var playPauseButton = document.getElementById("btn_playPause");

function losAudio_playPause() {
    var isPaused = losAudio.paused;
    losAudio[isPaused ? "play" : "pause"]();
    playPauseButton.innerHTML = '<i class="fa ' + (isPaused ? 'fa-music' : 'fa-pause') + '"></i>';
}

playPauseButton.addEventListener("click", losAudio_playPause);

这样做的目的是判断音频当前是否暂停或正在播放，并使用三元操作符将按钮图标分别设置为FA-MUSIC或FA-PAUSE.然后，使用innerHTML属性用新图标更新按钮的内容.