js隔行变色效果

最新推荐文章于 2024-12-02 07:00:00 发布

锦鲤抄liyanhe

最新推荐文章于 2024-12-02 07:00:00 发布

阅读量504

点赞数

CC 4.0 BY-SA版权

分类专栏：案例文章标签： js

本文链接：https://blog.youkuaiyun.com/liyanhecsdn/article/details/86219846

案例专栏收录该内容

0 篇文章

订阅专栏

本文介绍了一个简单的HTML和JavaScript实现，通过按钮点击事件，为列表项动态地添加奇偶行背景色，增强了网页的视觉效果。代码中使用了getElementById和getElementsByTagName等DOM操作方法，实现了对列表项的遍历和样式更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.even{
	background: #eee;
}
.odd{
	background: #fff;
}
	
</style>
</head>
<body>
	<input id="btn" type="button"value="点击">
<ul id="fristList">
	<li>哈哈</li>
	<li>哈哈</li>
	<li>哈哈</li>
	<li>哈哈</li>
	<li>哈哈</li>
</ul>
<script>
    var btn = document.getElementById("btn");
    var fristList = document.getElementById("fristList");
	var lis = fristList.getElementsByTagName("li");	
	btn.onclick = function (){
		for(var i=0; i<lis.length; i++){
			if(i%2==0){
				lis[i].className="even";
			}else{
				lis[i].className="odd";
			}
		}
	}
</script>
</body>
</html>