当前位置：网站首页>DOM操作-案例：切换背景图片

DOM操作-案例：切换背景图片

2022-07-31 05:18:00 【春意迟迟、】

要求：有几张供选择的图片，点击哪张图片，哪张图片就作为背景图片

写代码之前先来分析思路：

获取页面上的图片，把它们保存到数组中
遍历保存图片的数组，为每个图片添加点击事件
点击时间里面就是写：把点击的图片作为背景图

<body>
     <style>
        img {
            width: 100px;
            height: 100px;
        }
    </style>
    
    <img src="../picture/玫瑰.webp" alt="" class="img1">
    <img src="../picture/粉色的云.webp" alt="" class="img2">
    <img src="../picture/草原.webp" alt="" class="img3">
</body>
    <script>
        //可以用for循环实现
        var imgs = document.querySelectorAll("img")
        console.log(imgs)
        //遍历保存图片的类数组
        for (let i = 0; i < imgs.length; i++) {
            //为每个图片绑定点击事件
            imgs[i].onclick = function fn() {
                //${}取值
                document.body.style.backgroundImage = `url("${imgs[i].src}")`
                document.body.style.backgroundRepeat = "no-repeat"
            }
        }
    </script>

 <script>
        //也可以用forEach循环实现
        var imgs = document.querySelectorAll("img")
        imgs.forEach((el) => {
            //el是imgs里面的元素，也就是每张图片
            el.onclick = function fn() {
                document.body.style.backgroundImage = `url("${el.src}")`
                document.body.style.backgroundRepeat = "no-repeat"
            }
        })
</script>

结果展示：