JS点击换肤案例（onclick点击事件）

1、项目说明

根据这个小练习我们可以巩固之前学的HTML、CSS、JS的一些属性。

上图是我们需要设制作的TML、CSS页面，我们需要为上面四张小图设置点击事件，点击小图后我们整个页面背景就更换为哪张！

1.1、HTML

我们将整个页面分为四部分：页面背景、头部小图、LOGO、搜索框，详细代码如下:

    <div class="skin"><img src=" " alt=""></div>
    <!-- 头部 -->
    <div class="top">
        <ul class="top_img">
            <li><img src="./img/small/525.jpg" alt=""></li>
            <li><img src="./img/small/813.jpg" alt=""></li>
            <li><img src="./img/small/829.jpg" alt=""></li>
            <li><img src="./img/small/880.jpg" alt=""></li>
        </ul>
    </div>
    <!-- logo -->
    <div class="logo"></div>
    <!-- search搜索框 -->
    <div class="search"></div>

这是HTML页面结果，可以看出四张小图并没有按照横向排列，而且整个样式也没有达到我们所期待的结果，接下来我们设置CSS来改变样式达到我们所希望的页面。

1.2、CSS

（1）先设置最基础的操作

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

（2）要让小li取点前面的小圆点，需要设置list-style: none;
（3）需要设置float: left;让li里面的图片浮动起来，变成横向排列。
（4）我们这里LOGO以及搜索框均为图片比较好操作。
代码如下：

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.skin {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #404040;
    z-index: -10;
}
.skin img{
    width: 100%;
    height: 100%;
}
.top {
    position: relative;
    height: 200px;
    width: 100%;
    background-color: #FFF;
    opacity: 0.87;
}

.top_img {
    list-style: none;
    margin: 0 auto;
    width: 1040px;
    height: 200px;
}

.top_img li {
    width: 260px;
    height: 163px;
    margin-top: 18.5px;
    float: left;
}

.top_img>img {
    width: 100%;
    height: 100%;
}

.logo {
    width: 540px;
    height: 258px;
    margin: 50px auto;
    background: url(../img/logo.png) no-repeat center center;
    zoom: 0.5;
}

.search {
    width: 641px;
    height: 40px;
    margin: 0 auto;
    background: url(../img/search.png) no-repeat center center;
}

所得结果为最开始显示的图。

1.3JavaScript

实现思路：
利用for循环给每个li里面的img设置点击事件，点击哪个图片背景就显示哪个。

let skin_small = document.querySelector('.top_img').querySelectorAll('img');
let skin = document.querySelector('.skin').querySelector('img');

for (let i = 0; i < skin_small.length; i++) {
    skin_small[i].onclick = function () {
        //replace是将路径中 “small”变为“big”
         skin.src=this.src.replace("small", "big");
    }
}

1.4、整体结果