js隔行换色

最新推荐文章于 2024-04-14 08:44:26 发布

林剑南

最新推荐文章于 2024-04-14 08:44:26 发布

阅读量234

点赞数 1

分类专栏： js案例文章标签： js隔行换色

本文链接：https://blog.csdn.net/u014414110/article/details/88024364

版权

js案例专栏收录该内容

35 篇文章 0 订阅

订阅专栏

效果：
在这里插入图片描述

<body>
		<input type="button" id="btn" value="点击变色"/>
		<ul id="gh">
			<li>红旗</li>
			<li>五菱宏光</li>
			<li>奔驰</li>
			<li>哈佛</li>
		</ul>
		
		<script>
			function my(id){
				return document.getElementById(id);
			}
			my("btn").onclick=function(){
				var list=my("gh").getElementsByTagName("li");
				for (var i=0;i<list.length;i++) {
					/*if (i%2==0) {
						list[i].style.backgroundColor="red";
					} else {
						list[i].styl.backgroundColor="yellow";
					}*/
					list[i].style.backgroundColor=i%2 ?"red":"yellow";
				}
			}
			
			
		</script>
	</body>