页面换肤：给4个小图片利用循环注册点击事件，当我们点击了这个小图片时，让页面背景改为当前的图片。

最新推荐文章于 2022-12-21 18:52:28 发布

叫我魏什么

最新推荐文章于 2022-12-21 18:52:28 发布

阅读量210

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/Lou__Lan/article/details/127591862

版权

<style>
    img {
        width: 100px;
        height: 50px;
    }

    #body {
        margin: 0;
        width: 100vw;
        height: 100vh;
        background-repeat: no-repeat;
        background-size: 100vw 100vh;
    }
</style>

<body id="body">
    <img class="imgSmall" src="./img/img01.jpg" alt=""> 
    <img class="imgSmall" src="./img/img02.jpg" alt="">
    <img class="imgSmall" src="./img/img03.jpg" alt="">
    <img class="imgSmall" src="./img/img04.jpg" alt="">
    <script>
        let imgSmall = document.getElementsByClassName('imgSmall');         // 获取图片节点
        // 定义数组，添加图片地址
        let arr = ['./img/img01.jpg', './img/img02.jpg', './img/img03.jpg', './img/img04.jpg'];
        for (let i = 0; i < imgSmall.length; i++) {         // 用循环来实现 写一个点击事件就可以随便切换图片
            imgSmall[i].addEventListener('click', () => {
                let body = document.getElementById('body');
                body.style.backgroundImage = `url(${arr[i]})`;  // 将body 的背景图片地址切换为对应的点击的图片的地址
            })
        }
    </script>
</body>