隔行换色
2019-03-31 本文已影响0人
垃圾桶边的狗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.li_red{
width: 400px;
background: red;
}
.li_blue{
width: 400px;
background: blue;
}
</style>
<script type="text/javascript">
onload = function(){
//定义循环的次数（生成li数量）
var row_num = 9;
//拿到我们ul元素
var my_ul = document.getElementsByTagName("ul")[0];
//循环创建，并且添加对应的文本内容，根据我们的i来赋值我们class
for(var i=0;i<row_num;i++){
//创建li
var my_li = document.createElement("li");
//加内容
my_li.innerText = i+1;
//如果i是偶数给红色的样式（li_red）否则设置样式（li_blue）
if(i%2==0){
my_li.className = "li_red";
} else {
my_li.className = "li_blue";
}
//将创建的元素加入到我们的ul
my_ul.appendChild(my_li);
}
}
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
