JS隔行变色、鼠标滑过

CSS

   <style>
      *{
          margin: 0;
          padding: 0
      }
      ul li{
          list-style: none
      }
      #box{
          margin: 10px auto;
          width: 500px
      }
      #box li{
          line-height: 50px;
          border-bottom: 1px dashed #999999;
      }
  </style>

HTML

  //ul#box>li*5{这是第$个Li哈哈哈}
 <ul id="box">
     <li>我是第1个LI哈哈哈</li>
     <li>我是第2个LI哈哈哈</li>
     <li>我是第3个LI哈哈哈</li>
     <li>我是第4个LI哈哈哈</li>
     <li>我是第5个LI哈哈哈</li>
 </ul>

JS

<script>
    //自定义属性：
         //前期我们把一些值存储在元素的自定义属性上，后期需要用到的时候，直接从属性上获取到这些值即可      
     var box=document.getElementById('box');
     var list=box.getElementsByTagName('li');
      for(var i=0;i<=list.length;i++){
          var bg= i % 2 == 0 ? 'white':'pink';//自定义属性值
          list[i].style.background=bg;//隔行变色
          //设置自定义属性myOriginBg用来存储每一个li背景
          list[i].myOriginBg=bg;
          //鼠标滑过
          list[i].onmouseover=function(){
              //this指向list[i]
            this.style.background='lightblue';//鼠标滑过变浅蓝色
          }
          list[i].onmouseout=function(){
              this.style.background=this.myOriginBg;//滑出hui恢复颜色
          }
      }

</script>

效果图