循环注册点击之更换背景案例

点击更换背景案例：

先看效果图：

案例中设置了四个按钮，每当点击不同的按钮时背景就随之更换成想相应的图片。

核心思路如下：

一、利用for循环给四个按钮注册点击事件

二、用this关键字（指向方法的调用者）将获取到当前点击按钮的图片的路径传送给背景

scirpt核心代码如下：

    <script>
        var imgs = document.querySelectorAll('img');
        for (var i = 0; i < imgs.length; i++) {
            imgs[i].onclick = function () {
                document.body.style.backgroundImage = 'url(' + this.src + ')';
            }
        }
    </script>

HTML结构代码如下：

    <ul class="box">
        <li><img src="images03/b1.jpg"></li>
        <li><img src="images03/b2.jpg"></li>
        <li><img src="images03/b3.jpg"></li>
        <li><img src="images03/b4.jpg"></li>
    </ul>

CSS样式代码如下：

    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }
        body {
            background: url("images03/b3.jpg") no-repeat fixed center;
        }
        .box {
            display: block;
            width: 416px;
            height: 100px;
            margin: 150px auto;
            padding-bottom: 4px;
            background-color: black;
        }
        .box li {
            float: left;
            width: 100px;
            height: 100px;
            margin: 2px 2px;
            cursor: pointer;
            background-color: lightgoldenrodyellow;
        }
        .box img {
            width: 90px;
            height: 90px;
            margin-left: 5px;
            margin-top: 5px;
        }

    </style>