JS练手小作业，简单的网页换肤效果

最新推荐文章于 2022-08-11 19:23:35 发布

小小豪豪

最新推荐文章于 2022-08-11 19:23:35 发布

阅读量342

点赞数

分类专栏： JS 文章标签： js css javascript html5 前端

本文链接：https://blog.csdn.net/Chtholly_Nota_L/article/details/107199521

版权

JS 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

之前觉得网页换肤是一件很神奇的事情，正好这几天的学习也接触到了一些JS原理，不妨来做一下神奇的网页换肤。

<!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>
        img {
            width: 100px;
            height: 100px;
            cursor: pointer;
        }
        
        .photo_box {
            width: 350px;
            margin: 0 auto;
        }
        
        body {
            background-image: url("./photo/u=1964552154,3663546321&fm=26&gp=0.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
    </style>
</head>

<body>
    <div class="photo_box">
        <img src="./photo/u=1964552154,3663546321&fm=26&gp=0.jpg" alt="">
        <img src="./photo/商店.jpg" alt="">
        <img src="./photo/CLANNAD.jpg" alt="">
    </div>
    <script>
        var imgs = document.querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function() {
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>
</body>

</html>