<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
*{
margin: 0;
padding: 0;
}
ul{
width: 800px;
margin-left: 20px;
margin-top: 30px;
}
li{
width: 800px;
height: 50px;
margin: 10px 0;
list-style: none;
border: 1px solid #f0f;
}
input{
width: 100px;
height: 40px;
margin: 10px 20px 0;
background: #f0f;
border: none;
outline: none;
color: #fff;
font-size: 14px;
font-weight: 700;
}
</style>
</head>
<body>
<input type="button" value="添加背景颜色"/><input type="button" value="取消背景颜色" />
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
<!--<script type="text/javascript">
(function(){
var buttons = document.getElementsByTagName('input');
var noteLies = document.querySelectorAll('li');
buttons[0].onclick=function(){
//迭代(遍历)数组
for(i=0;i<noteLies.length;i++){
//检查li属于哪种级别
if (i%3==0){
noteLies[i].style.background='#f00';
}
else if (i%3==1){
noteLies[i].style.background='#f0f';
}
else if(i%3==2){
noteLies[i].style.background='#ff0';
}
}
}
buttons[1].onclick=function(){
//迭代(遍历)数组
for(i=0;i<noteLies.length;i++){
noteLies[i].style.background='';
}
}
})()
</script>-->
<script type="text/javascript">
//简化代码
(function(){
var buttons = document.getElementsByTagName('input');
var noteLies = document.querySelectorAll('li');
var bg = ['#f00','#f0f','#ff0',''];
buttons[0].onclick=function(){
//迭代(遍历)数组
for(i=0;i<noteLies.length;i++){
//检查li属于哪种级别
noteLies[i].style.background=bg[i%3];
}
}
buttons[1].onclick=function(){
//迭代(遍历)数组
for(i=0;i<noteLies.length;i++)
noteLies[i].style.background=bg[bg.length-1];
}
})()
</script>
</html>
效果图
点击添加背景颜色
点击取消背景颜色