JavaScript（JS）制作网页--点击图片换背景

喜欢ヅ旅行 2022-12-22 00:56 106阅读 0赞

# JS制作网页–点击图片换背景 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

网页中有四个图片，点击不同的图片，更换相对应的背景。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>背景</title>
        <style>
            *{
         
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            li {
         
                list-style: none;
            }
            img{
         
                border: 0px;
                vertical-align: middle;
                width: 192px;
            }
            div{
         
                width: 768px;
                height: 120px;
            }
            div ul {
         
                overflow: hidden;
                background-color: pink ;
                margin: 100px auto;
            }
            div  ul li {
         
                float: left;
                width: 192px;
                height: 120px;
                cursor: pointer;
            }
            body{
         
                background: url(images/1.jpg) no-repeat center top;
            }
        </style>
    </head>
    <body>
        <div>
            <ul>
                <li><img src=images/1.jpg> </li>
                <li><img src=images/2.jpg></li>
                <li><img src=images/3.jpg></li>
                <li><img src=images/4.jpg></li>
            </ul>
        </div>
        <script>
            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>
    </html>

[文件下载地址][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/0fc77e361a374fa0894ae9cf1750d5b7.png
[Link 1]: https://download.csdn.net/download/weixin_42579348/13119822