js点击图片切换背景

原创已于 2022-12-29 11:31:03 修改 · 1.1k 阅读

14 ·

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

标签

#javascript #前端 #vue.js

收录于

于 2022-12-21 18:52:28 首次发布

js 专栏收录该内容

54 篇文章

订阅专栏

这段代码展示了如何使用JavaScript监听HTML列表中的图片点击事件，当用户点击图片时，将该图片设置为页面背景。主要涉及DOM操作和事件处理。

<body>
    <ul class="baidu">
        <li><img src="./1.jpg"></li>
        <li><img src="./2.jpg"></li>
        <li><img src="./3.jpg"></li>
        <li><img src="./4.jpg"></li>
    </ul>
    <script>
        var imgs = document.querySelector('.baidu').querySelectorAll('img')
        console.log(imgs);
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                document.body.style.backgroundImage = 'url(' + this.src + ')'
            }
        }
    </script>
</body>