更改背景图片

短命女 2022-11-24 12:58 216阅读 0赞

![在这里插入图片描述][20200806111504838.gif]

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { 
                margin: 0;
                padding: 0;
            }
            
            body { 
                background-image: url(images/1.jpg);
            }
            
            div { 
                width: 660px;
                height: 100px;
                margin: 100px auto;
            }
            
            div img { 
                width: 160px;
                height: 100px;
                vertical-align: middle;
                cursor: pointer;
            }
        </style>
    </head>
    
    <body>
        <div>
            <img src="images/1.jpg" alt="">
            <img src="images/2.jpg" alt="">
            <img src="images/3.jpg" alt="">
            <img src="images/4.jpg" alt="">
        </div>
    </body>
    <script>
        var imgs = document.querySelector('div');
        console.log(imgs);
        var body = document.querySelector('body');
        console.log(body);
        var img = imgs.children;
        console.log(img);
        for (var i = 0; i < img.length; i++) { 
            img[i].onclick = function() { 
                body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
    
    </html>

资源图：

![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 2]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 3]

[20200806111504838.gif]: /images/20221124/a3c4dd673c42418c8cbca4f86211e6d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: /images/20221124/59c068268e0847858649e778cb599a59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 1]: /images/20221124/7bf167922077440d84553e1959a2596b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 2]: /images/20221124/1e27ae90d1d9419483f0ac39302adec0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70 3]: /images/20221124/4bd9da7b703b4bc38292e56e0d25d26e.png