点击图片实现背景的切换

最新推荐文章于 2025-08-05 13:12:03 发布

原创最新推荐文章于 2025-08-05 13:12:03 发布 · 1.4k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #html

收录于

实现效果
实现代码

    <title>点击图片改变背景图片</title>
    <style>
        li {
            float: left;
            list-style: none;
        }

        li img {
            width: 100px;
            height: 100px;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <ul>
        <li><img src="../images/1.jpg" alt=""></li>
        <li><img src="../images/2.jpg" alt=""></li>
        <li><img src="../images/3.jpg" alt=""></li>
        <li><img src="../images/4.jpg" alt=""></li>
    </ul>
    <script>
        // 1.获取事件源：
        var img = document.querySelector('ul').querySelectorAll('img');
        // 基本相同的元素利用循环绑定
        for (var i = 0; i < img.length; i++) {
            img[i].onclick = function () {
                document.body.style.backgroundImage = 'url(' + this.src + ' ) ';
            }
        }
    </script>
</body>