其他分享
首页 > 其他分享> > JS:点击图片更换背景图片(换肤)

JS:点击图片更换背景图片(换肤)

作者:互联网

<!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>

 

标签:换肤,body,..,img,jpg,JS,var,document,背景图片
来源: https://www.cnblogs.com/LIXI-/p/16479109.html