版权声明:我的新浪博客http://blog.sina.com.cn/f6056 https://blog.csdn.net/weimob258616/article/details/90115190
1-13 编程练习
根据下面的效果图,写出代码,实现列表各行换色的效果!
效果图如下:
任务
第一步:写出html代码
Tips:用列表显示内容
第二步:获得列表项对象
Tips:获得的对象是一个数组
第三步:使用循环为列表的奇数项设置背景颜色为黄色
参考代码:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>列表各行换色</title>
</head>
<body>
<h3>前端知识点</h3>
<ul id="listWeb">
<li>JavaScript基础</li>
<li>CSS基础</li>
<li>HTML基础</li>
<li>CSS3</li>
<li>HTML5</li>
<li>jQuery</li>
<li>Bootstrap</li>
<li>WebApp</li>
</ul>
<script>
//补充代码
window.onload = function () {
var oUl = document.getElementById("listWeb");
var alLi = oUl.getElementsByTagName("li");
var i = 0
while (i < alLi.length) {
if (i % 2 == 0) {
alLi[i].style.backgroundColor = "yellow";
}
i++;
}
}
</script>
</body>
</html>