基础 - 隔行变色

结构

<div class="box">
    <ul>
        <li>
            <span>小学</span><span>3年级</span><span>5班</span><span>周杰棍</span>
        </li>
        <li>
            <span>高中</span><span>2年级</span><span>3班</span><span>双截伦</span>
        </li>
        <li>
            <span>小学</span><span>3年级</span><span>5班</span><span>周杰棍</span>
        </li>
        <li>
            <span>高中</span><span>2年级</span><span>3班</span><span>双截伦</span>
        </li>
    </ul>
</div>

样式

.box {
    width: 230px;
}
ul {
    list-style-type: none;
}
.box li {
    line-height: 30px;
    padding-left: 10px;
}
.box li span {
    margin-right: 5px;
}

.box li.special {
    font-weight:bold;">#d7d764 !important;
}

行为

window.onload = function () {
    var aBox = document.getElementsByClassName("box");
    var aLi = aBox[0].getElementsByTagName("li");
    for(var i= 0,l=aLi.length; i<l; i++) {
        if (i%2) {
            aLi[i].style.backgroundColor = "#DDDDDD";
        } else {
            aLi[i].style.backgroundColor = "#cbc06c";
        }
　　　　　aLi[i].onmouseover = function () {
 　　　　   this.className = "special";
　　　　  }　　
　　　　  aLi[i].onmouseout= function () {
    　　　　this.className = "";
　　　　  }　　　　　
    }
}