JavaScript实现隔行变色效果

最新推荐文章于 2023-03-18 19:22:16 发布

AdminMyf

最新推荐文章于 2023-03-18 19:22:16 发布

阅读量373

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43289023/article/details/103615324

版权

本文介绍如何利用JavaScript动态地为HTML表格实现隔行变色效果，通过遍历表格行并设置不同的背景色，达到视觉上的区分，提高用户阅读体验。

摘要由CSDN通过智能技术生成

JavaScript实现隔行变色效果
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			li{
				height: 30px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oli = document.getElementsByTagName("li");
				var i= 0;
				setInterval(function(){
					i++;
					if(i%2==0){
						for(var j=0;j<oli.length;j++){
							if(j%2==0){
								oli[j].style.background = "red";
							}else{
								oli[j].style.background = "blue";
							}
						}
						
					}else{
						for(var j=0;j<oli.length;j++){
							if(j%2==0){
								oli[j].style.background = "blue";
							}else{
								oli[j].style.background = "red";
							}
						}
					}
				},1000)
			}
		</script>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</body>
</html>