小练习1：隔行变色第一个小练习，练习JS中比较简单的隔行变色问题，隔行变色主要通过改变li的class名称来改变各行的c

第一个小练习，练习JS中比较简单的隔行变色问题，隔行变色主要通过改变li的class名称来改变各行的css属性

        #div li.bg0{
            background: pink;
            color: burlywood;
        }
        #div li.bg1{
            background: orange;
            color: gray;
        }

HTML样式如下：

<body>
    <div id="div">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
</body>

通过循环获取li标签的各个实例，这里可以通过for循环或者数组的forEach方法都可以实现上述要求,forEach方法如下：

    [].slice.call(oLis).forEach(function (item,index) {
        var n = index%2;
        item.className = "bg" + n;
    })

for循环

    for (var i = 0; i < oLis.length; i++){
        var n = i%2;
        oLis[i].className = "bg" + n;
    }

执行结果如下：

现在我们再在隔行变色的基础上增加一些鼠标划入（onmouseover）划出（onmouseout）的事件，使该样式在划入时变色,划出时变回原来的颜色
我们还需要定义两个li的class名和样式，为了保存划入时更改的颜色

        #div li.ch0{
            background: skyblue;
        }
        #div li.ch1{
            background: brown;
        }

之后在循环体内添加划入划出事件

    [].slice.call(oLis).forEach(function (item,index) {
        var n = index%2;
        item.className = "bg" + n;
        item.onmouseover = function () {
            item.className = "ch" + n;
        }
        item.onmouseout = function () {
            item.className = "bg" + n;
        }
    })

最后实现结果如下

JS完整代码如下：

    var oDiv = document.getElementById("div");
    var oLis = oDiv.getElementsByTagName("li");
    [].slice.call(oLis).forEach(function (item,index) {
        var n = index%2;
        item.className = "bg" + n;
        item.onmouseover = function () {
            item.className = "ch" + n;
        }
        item.onmouseout = function () {
            item.className = "bg" + n;
        }
    })