描述:使得列表发生隔行换色
实现方法:把所有的行封装在一个数组里,进行遍历,对数组中的每一个元素进行判断,偶数个的%2就会等于0;这样就可以对偶数行或者奇数行进行背景色的控制了。
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<style>
ul{
text-align: center;
list-style: none;
width: 500px;
margin: 0 auto;
}
li{
height: 30px;
cursor:pointer;
font:700 16px/30px "华文中宋";
}
</style>
</head>
<body>
<ul>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
<li>天将降大任于斯人也</li>
</ul>
</body>
</html>
<script>
//方法1
/* var arr = document.getElementsByTagName("li");
for (var i = 0;i<arr.length;i++){
if(i%2===0){
arr[i].style.background="#64ffd8";
}
}*/
//方法2
var ul = document.getElementsByTagName("ul")[0];
var arr = ul.childNodes;
var newArr = [];
for (var i = 0;i<arr.length;i++){
if(arr[i].nodeType===1){
newArr.push(arr[i]);
}
}
for (var i = 0;i<newArr.length;i++){
if(i%2!=0){
newArr[i].style.background = "#64ffd8";
}
}
</script>