<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script type="text/javascript">

  window.onload=function color(){

  var box = document.getElementById("box");

  var rows = box.querySelectorAll("li");

  for(var i = 0; i < rows.length; i++){

    rows[i].index=i;//index是自己array数组的一个属性,此处给它赋值原因:for循环同步,函数异步,i值无法像都是同步的时候i一次一遍,同步执行完才是异步

    if(rows[i].index%2==0){

      rows[i].style.background ="pink";

    }else{

      rows[i].style.background ="green";

    }

    rows[i].onmouseover=function(){

    if(this.index%2==0){

      this.style.background ="#c11";

    }else{

      this.style.background ="#1c1";

    }

  }

  rows[i].onmouseout=function(){

    if(this.index%2==0){

      this.style.background ="pink";

    }else{

      this.style.background ="green";

    }

  }

}

}

</script>

<style>

*{

margin: 0;

padding: 0;

list-style-type: none;

}

li{

width: 500px;

height: 30px;

text-align: center;

line-height: 30px;

border-radius: 4px;

box-shadow: 0 2px 3px #ddd;

margin: 10px 0;

}

ul{ width: 500px;

margin: 100px auto;

}

</style>

</head>

<body>

  <ul id="box">

    <li id="dan">我是行</li>

    <li>我是行</li>

    <li class="dan">我是行</li>

    <li>我是行</li>

    <li class="dan">我是行</li>

    <li>我是行</li>

  </ul>

</body>

</html>

posted on 2018-08-17 08:51  薛小白  阅读(292)  评论(1编辑  收藏  举报