每頁加載隨機背景圖像

Question

我不知道我的版本是否可能...我的HTML代碼

<div id="AvPinkImages" class="AvImages">
    <div id="AvPinkGalleryImages" class="AvGalleryImages">

    <span class="AvGbtn" style="background-image: url(/uploads/articles/768eec43.jpg); background-size: 100% 100%;" rel="nofollow"></span>

    <span class="AvGbtn" style="background-image: url(/uploads/articles/a79e6b78.jpg); background-size: 100% 100%;" rel="nofollow"></span>  

    <span class="AvGbtn" style="background-image: url(/uploads/articles/27570903.jpg); background-size: 100% 100%;" rel="nofollow"></span>     
    </div>
</div>

這是我的js代碼，以獲取所選的背景圖片

function AvBackgroundImages(e) {
    if (e.target.className == 'AvGbtn') {
        var favImage = e.target.style.backgroundImage;
        setCookie('image', favImage);
        document.body.style.backgroundImage = favImage;
        console.log(favImage);
    }
}
document.onclick = AvBackgroundImages;

function AvBackgroundImage() {
    var favImage = document.body.style.backgroundImage;
    var image = getCookie('image');
    if (image === '') {
        document.body.style.backgroundImage = favImage;
    } else {
      document.body.style.backgroundImage = image;
    }
}
window.onload = function(){
AvBackgroundImage();
};

我要實現的是一個開關按鈕（ on / off ）。 如果在每頁加載時更改背景圖像，如果關閉則在背景上顯示所選圖像？

Answer 1

<style>
    // default image
    img{
        background:  url('off.jpg');
    }
    // on image if IMG has a class on in it
    img.on{
        background:  url('on.jpg');
    }
</style>

<script>
      // based on your value in session storage or local storage
      document.querySelector('img').addClass('on');
</script>