DOM 实作换背景图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>changeBg</title>
    <style>
        body{
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
            background-attachment: cover;
        }
        div{
            display: flex;
            justify-content: center;
            margin-top: 130px;

            
        }
        img{
            margin: 0px;padding: 0px;
            width: 50px;
            margin-left: 15px;
            margin-right: 15px;
            border :#999 solid 1px
        }
    </style>
</head>
<body>
    <div id="bg">
        <img src="img/closeEye.png" alt="">
        <img src="img/icons.jfif" alt="">
        <img src="img/openEye.jfif" alt="">
        <img src="img/v.jpg" alt="">
    </div>

    <script>
        var bgchoose =  document.querySelector("#bg").querySelectorAll("img") 
        var body = document.body
        for(var i=0;i<bgchoose.length;i++){
            console.log(bgchoose[i].src)
            bgchoose[i].onclick = function(){
                //把当前路径取过来 给body
                //所有属性都是一个字幅串的形式
                body.style.backgroundImage=`url(${this.src})`
                //body.backgroundImage="url("+this.src+")"
            }

        }         
    </script>
</body>
</html>

杂谈