DOM：点击图片更换背景图片（换肤）

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>

<body>
    <!-- 换肤 -->
    <style>
        body {
            background-size: 100% 800px;
        }

        img {
            width: 120px;
            height: 120px;
        }
    </style>
    <img id="img1" src="../1.jpg" alt="">
    <img id="img1" src="../2.jpg" alt="">
    <img id="img1" src="../3.jpg" alt="">

    <script>
        var btn = document.getElementsByName('button');
        var img = document.getElementsByTagName('img');
        var imgs = ["../1.jpg", "../2.jpg", "../3.jpg"];

        for (let i = 0; i < img.length; i++) {
            img[i].onclick = function () {
                document.body.style.backgroundImage = `url('${imgs[i]}')`;
            }
        }
    </script>
</body>

</html>

posted on 2022-07-14 19:53 香香鲲阅读(313) 评论(0) 收藏举报