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

最新推荐文章于 2023-04-01 21:30:19 发布

春意迟迟、

最新推荐文章于 2023-04-01 21:30:19 发布

阅读量1.3k

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_58167492/article/details/125811364

版权

本文介绍了如何使用JavaScript实现页面上图片点击后将其设置为背景图片的功能。首先将页面上的图片存储到数组，然后遍历数组为每个图片添加点击事件。在点击事件中，将点击的图片设置为背景图片。

摘要由CSDN通过智能技术生成

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

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

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

<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].oncl