DOM 實作換背景圖

2021 iThome 鐵人賽

DAY 12

Modern Web

前端幼鳥三十天養成記系列第 12 篇

13th鐵人賽

ChihBird稚鳥

2021-09-17 20:50:27

560 瀏覽

分享至

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