element.style.backgroundImage = `url(${url})`; 不工作

Question

全部。 我遇到了一個關於如何動態更改 div 的背景圖像的問題。 當我單擊下一步按鈕時，我想更改背景圖像； 但是，語法 'disk.style.backgroundImage = "url(xxx)" 不起作用； 我該如何解決？ 下面是對應的代碼，希望大家幫我解決。

HTML 代碼：

<div id="disk" class="player--info__left"></div>

CSS 代碼

        .player--info__left{
            position: absolute;
            width: 5.5rem;
            height: 5.5rem;
            border: 1px solid #fff;
            border-radius: 50%;
            padding: 2px;
            top: -1.5rem;
            left: -1.5rem;
            margin: 0 4px 2px 2px;
            background-image: url('/images/IMG_4328.JPG');
            background-size: cover;
            object-fit: cover;
            &:hover{
                transform: rotate(360deg);
                transition: all 1s ease-in-out;
            }
            &::after{
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                border-radius: 50%;
                border: 3px solid rebeccapurple;
            }
        }

JS 代碼，在這部分我想動態改變背景圖像。

const songList = [
    {
        src: '/music/Gymnopédies.mp3',
        img: '/music-img/Gymnopédies.jpg',
        title: 'Gymnopédies',
        singer: 'Erik Satie',
    },
    {
        src: '/music/Old Town Road.mp3',
        img: '/music-img/Lil Nas X.png',
        title: 'Old Town Road',
        singer: 'Lil Nas X',
    },
    {
        src: '/music/Daddy.mp3',
        img: '/music-img/Daddy.png',
        title: 'Daddy',
        singer: 'Coldplay',
    },
];

let index = 0;
next.addEventListener('click', function () {
    ++index;
    if (index >= songList.length - 1) {
        index = 0;
    }
    // isPlaying = true;
    console.log(disk);
    console.log(diskp);
    disk.style.backgroundImage = `url(${songList[index].img})`;

    playSong();
    playerButton.click();
});

Answer 1

此片段證明使用按鈕單擊循環瀏覽背景圖像沒有問題。 這意味着您的問題不完整，問題出在其他地方。
除非您提供更多詳細信息，否則我們將無法回答您的問題。

 const imageUrls = [ "https://upload.wikimedia.org/wikipedia/commons/thumb/e/e1/FullMoon2010.jpg/220px-FullMoon2010.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/220px-The_Earth_seen_from_Apollo_17.jpg", "https://upload.wikimedia.org/wikipedia/commons/thumb/0/02/OSIRIS_Mars_true_color.jpg/220px-OSIRIS_Mars_true_color.jpg", ]; let index = 0; function onButtonClick() { const disk = document.getElementById("disk"); disk.style.backgroundImage = `url(${imageUrls[index]})`; index++; if (index >= imageUrls.length) index = 0; }

 #disk { width: 220px; height: 220px; }

 <button onclick="onButtonClick()">Click me repeatedly to cycle through images</button> <div id="disk" class="player--info__left"></div>