一個簡單的隔行變色小案例噪叙，二話不說上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
ul {
list-style: none;
width: 300px;
margin: 0 auto;
}
li {
font-size: 20px;
line-height: 30px;
}
.orange {
background-color: orange;
}
.skyblue{
background-color: skyblue;
}
</style>
</head>
<body>
<!-- ul>li*10 -->
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</body>
<script>
var oUl = document.getElementById("box");
// 在ul里面找到 標(biāo)簽為li的所有dom節(jié)點(diǎn)
var lis = oUl.getElementsByTagName("li");
console.log(lis);
// [object HTMLCollection] 類數(shù)組伞芹，里面包含的是html節(jié)點(diǎn)
// console.log( Object.prototype.toString.call(lis) );
for(var i=0; i<lis.length; i++){ // i 值是索引值拯腮， 變化 0~9
// 拿到每一個 li 節(jié)點(diǎn)
var item = lis[i];
// i%2 取余，數(shù)學(xué)運(yùn)算
if(i%2 === 1){ // 偶數(shù)行
item.className = "orange"; // 改變這個li的 class
}else{ // 奇數(shù)行
item.className = "skyblue";
}
}
</script>
</html>
