js控制隔行换色

最新推荐文章于 2025-04-15 10:44:14 发布

hadoopxsy

最新推荐文章于 2025-04-15 10:44:14 发布

阅读量194

点赞数

CC 4.0 BY-SA版权

分类专栏： js学习之路文章标签： js控制隔行换色

本文链接：https://blog.youkuaiyun.com/hadoopxsy/article/details/79755503

js学习之路专栏收录该内容

4 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		 	#box{
		 		width: 300px;
		 	}
			li{
				line-height: 30px;
				list-style-type: none;
			}
			li span{
				margin: 5px;
			}
		/* 创建li 的类*/
		 .bianliang{
		 	background-color: #ccc !important;
		 }
		</style>
		<script>
			window.onload = function(){
				var listLi = document.getElementsByTagName("li");
				for(var i=0;i<listLi.length;i++){
					if(i%2 == 0){
						listLi[i].style.backgroundColor = "#eee";
					}
					
					//鼠标经过的时候变亮
					listLi[i].onmouseover = function() {
						this.className = "bianliang"; //指定该li的class="bianliang"
					}
					
					//鼠标离开的时候变暗
					listLi[i].onmouseout = function() {
						this.className = "";
					}
				}
				
			}
		</script>
	</head>
	<body>
		<div id="box">
			<ul>
				<li><span><span id="">你好，，，，，</span></span></li>
				<li><span><span id="">你好6666</span></span></li>
				<li><span><span id="">你好8888</span></span></li>
				<li><span><span id="">你好0000</span></span></li>
				<li><span><span id="">你好22222</span></span></li>
				<li><span><span id="">你好111111</span></span></li>
		</div>
	</body>
</html>

js控制 隔行换色

js控制隔行换色