<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<style>
*{
padding:0;
margin:0;
}
ul{
list-style: none;
}
#box{
width:500px;
margin:10px auto;
}
#box li{
line-height:35px;
border-bottom: 1px dashed #999;
}
</style>
</head>
<body>
<ul id="box">
<li>我是第1个LI</li>
<li>我是第2个LI</li>
<li>我是第3个LI</li>
<li>我是第4个LI</li>
<li>我是第5个LI</li>
</ul>
<!--<script src="./js/bian.js"></script>-->
<script>
var box=document.getElementById('box');
var boxList=box.getElementsByTagName('li');
/*
*自定义属性编程思想:
* 前期把一些值存储到元素的自定义属性上,后期需要用到的时候,直接从属性上获取到这些值即可
*
* */
for(var i=0;i<boxList.length;i++){
var bg=i%2===0?'white':'pink';
//隔行变色
boxList[i].style.backgroundColor=bg;
//设置自定义属性用来存储每一个li的背景
boxList[i].myOriginBg=bg;
//鼠标滑过变色
boxList[i].onmouseover=function(){
this.style.backgroundColor='lightblue';
};
//鼠标移开恢复
boxList[i].onmouseout=function(){
this.style.backgroundColor=this.myOriginBg;
}
}
</script>
</body>
</html>
02-28
470
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
08-12
2512
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)
04-21
2465
![](https://csdnimg.cn/release/blogv2/dist/pc/img/readCountWhite.png)