webAPI05-02隔行变色

最新推荐文章于 2022-09-22 15:18:07 发布

雨乐无穷

最新推荐文章于 2022-09-22 15:18:07 发布

阅读量159

点赞数 1

分类专栏： JavaScript学习笔记

JavaScript学习笔记专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隔行变色</title>
	</head>
	<body>
		<ul id="shan">
			<li>泰山</li>
			<li>沂山</li>
			<li>崂山</li>
			<li>蒙山</li>
			<li>千佛山</li>
			<li>峄山</li>
		</ul>
		<script type="text/javascript">
			var shan = document.getElementById('shan');
			//shan.getElementsByTagName(li);
			
			
			
			//判断是否有子节点
			if(shan.hasChildNodes()){
				
				
				for(var i = 0;i < shan.children.length;i++){
					li = shan.children[i];
					if(i % 2 === 0){
						//奇数行
						li.style.backgroundColor = 'orange';
					}else{
						//偶数行
						li.style.backgroundColor = 'palevioletred';
					}
				}
			}
		</script>
	</body>
</html>