页面换肤效果js代码实现

页面换肤效果

一、要求：点击相应图片，将页面背景设置为相应图片

考察知识点：

①利用for循环注册事件

②利用js修改样式属性

二、效果展示：

三、代码实现：

1、html结构：

<body>
    <div class="box">
        <ul>
            <li><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
        </ul>
    </div>
</body>

2、样式文件：

<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        background: url(images/1.jpg) no-repeat;
        background-size: cover;
    }
    
    .box {
        width: 1000px;
        height: 100px;
        margin: 20px auto;
        border: 2px solid slategray;
        border-radius: 5px;
    }
    
    .box ul li {
        float: left;
        width: 25%;
        height: 100px;
        list-style: none;
    }
    
    img {
        width: 100%;
        height: 100%;
    }
</style>

3、js文件

<script>
    //1、获取元素
    var imgs = document.querySelector('.box').querySelectorAll('img');
    var body = document.querySelector('body');
    //2、循环添加点击事件
    for (var i = 0; i < imgs.length; i++) {
        imgs[i].onclick = function() {
            // this.src就是我们点击图片的路径，把这个路径给body即可
            // console.log(this.src);
            body.style.background = 'url(' + this.src + ')';
            body.style.backgroundSize = 'cover'; /* 将背景图片等比缩放填满整个容器*/
        }
    }
</script>