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();
};

我想要实现的是一个开关按钮（<strong>打开 / 关闭）。如果打开会在每次加载页面时更改背景图像，如果关闭则在后台显示所选图像？

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>

每页加载随机背景图像

1 个答案: