1.html和css代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
<li>我我我我我</li>
<li>我我我我我</li>
<li>我我我我我</li>
<li>我我我我我</li>
<li>我我我我我</li>
<li>我我我我我</li>
<li>我我我我我</li>
<li>我我我我我</li>
</ul>
</body>
</html>
2.javascript代码
<script>
document.getElementById("btn").onclick = function(){
//初始化count的值
var count = 0;
//获取ul中所有的子节点
var nodes = document.getElementById("uu");.childNodes;
for(var i=0;i<nodes.length;i++){
//判断这个节点是不是li标签
if(nodes[i].nodeType==1 && nodes[i].nodeName == "LI"){
nodes[i].style.backgroundColor=count%2==0?"red":"yellow";
count++;
}
}
}
</script>