学习来源：https://www.bilibili.com/video/BV1HJ41147DG
 
 

在这里插入图片描述
思路

  • 给一组元素注册事件
  • 给4个小图片利用循环注册点击事件
  • 当我们点击了这个图片，让我们页面背景改为当前的图片
  • 把当前图片的 src 路径取过来，给body做为背景即可
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 清除内边距、外边距 */
            margin: 0;
            padding: 0;
            /* 盒子大小为 width，padding和border不会撑大盒子 */
            box-sizing: border-box;
        }

        img {
            /* 清除图片边框，照顾低版本浏览器，如果图片外面包含了链接会有边框问题 */
            border: 0;
            /* 清除图片底侧有空白缝隙的问题 */
            vertical-align: middle;
            cursor: pointer;
            width: 200px;
            height: 125px;
            border: 1px solid transparent;
        }

        .com {
            width: 815px;
            margin: 2% auto;
            background-color: #fff;
            text-align: center;
        }

        body {
            background: no-repeat center top;
        }
    </style>
</head>

<body>
    <div class="com">
        <img src="images/1.jpg" alt="">
        <img src="images/2.jpg" alt="">
        <img src="images/3.jpg" alt="">
        <img src="images/4.jpg" alt="">
    </div>

    <script>
        var imgS = document.getElementsByTagName('img');
        for (var i = 0; i < imgS.length; i++) {
            imgS[i].onclick = function () {
                for (var i = 0; i < imgS.length; i++) {
                    imgS[i].style = '';
                }
                this.style.borderColor = 'red';
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>
版权声明：本文为qq_45645902原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_45645902/article/details/105563033