J13 隔行变色1、css实现2、js实现

1、css实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>隔行变色</title>
</head>
<link rel="stylesheet" href="reset.min.css">
<style>
   .box{
	   margin:30px auto;
	   width:400px;
   }
   .box h3{
	   margin-bottom:20px;
   }
   .box li{
	   text-overflow: ellipsis;
	   white-space: nowrap;
	   overflow: hidden;
	   border-bottom:1px dashed #eee;
	   line-height:36px;
   }
   .box li:nth-child(even){
     background:#f6f7fb;
   }
   .box li:hover{
	   background:pink;
   }
</style>
<body>
    <div class="box">
	  <h3>我是标题</h3>
	<ul class="list">
	    <li>我是js，你是谁呢,你会么，你会么，我是js，你是谁呢,你会么，你会么我是js，你是谁呢,你会么，你会么</li>
	    <li>我是jQ，你是谁呢</li>
	    <li>我是HTML，你是谁呢</li>
	    <li>我是CSS，你是谁呢</li>
	    <li>我是node，你是谁呢</li>
	    <li>我是webpack，你是谁呢</li>
	    <li>我是ajax，你是谁呢</li>
	</ul>
	</div>
</body>
</html>

2、js实现

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>隔行变色</title>
</head>
<link rel="stylesheet" href="reset.min.css">
<style>
   .box{
	   margin:30px auto;
	   width:400px;
   }
   .box h3{
	   margin-bottom:20px;
   }
   .box li{
	   text-overflow: ellipsis;
	   white-space: nowrap;
	   overflow: hidden;
	   border-bottom:1px dashed #eee;
	   line-height:36px;
   }
</style>
<body>
    <div class="box" >
	  <h3>我是标题</h3>
	<ul class="list" id="box" >
	    <li>我是js，你是谁呢,你会么，你会么，我是js，你是谁呢,你会么，你会么我是js，你是谁呢,你会么，你会么</li>
	    <li>我是jQ，你是谁呢</li>
	    <li>我是HTML，你是谁呢</li>
	    <li>我是CSS，你是谁呢</li>
	    <li>我是node，你是谁呢</li>
	    <li>我是webpack，你是谁呢</li>
	    <li>我是ajax，你是谁呢</li>
	</ul>
	</div>

<script>
	//方案一：鼠标移入、移除  自定义属性
	let box=document.getElementById("box"),
	    liList=box.getElementsByTagName("li");

		//1.偶数行颜色编程#f6f7fb
		for(var i=0;i<liList.length;i++){
			var item = liList[i],
			bg=item.style.backgroundColor ;
			bg = '#FFF';
			if(i%2!==0){
				item.style.backgroundColor="#f6f7fb";
			}else{
				liList[i].style.background="#fff";
			}
          item.My=bg;
		//2.鼠标移入背景色是粉色	
		item.onmouseover=function () {
		this.style.backgroundColor='pink';
	   }

       //3.鼠标离开还是之前的颜色
	  item.onmouseout=function () {
		   this.style.backgroundColor=this.My;
	   }
	}	   
</script>

<script>
	//方案二：let 块级作用域
	let box=document.getElementById("box"),
		liList=box.getElementsByTagName("li");

		//1.偶数行颜色编程#f6f7fb
		for(let i=0;i<liList.length;i++){
			let item = liList[i],
			bg=item.style.backgroundColor ;
			bg = '#FFF';
			if(i%2!==0){
				bg="#f6f7fb";
			}else{
				bg="#fff";
			}
			item.My=bg;
		//2.鼠标移入背景色是粉色	
		item.onmouseover=function () {
		this.style.backgroundColor='pink';
		}

		//3.鼠标离开还是之前的颜色
		item.onmouseout=function () {
			this.style.backgroundColor=this.My;
		}
	}	   
</script>

<script>
	//方案二：let 块级作用域
	let box=document.getElementById("box"),
		liList=box.getElementsByTagName("li");

		//1.偶数行颜色编程#f6f7fb
		for(var i=0;i<liList.length;i++){
		(function (i) {
			var item = liList[i],
				bg = '#FFF';
			i % 2 === 1 ? bg = '#f6f7fb' : null;
			item.style.backgroundColor = bg;
		
		//2.鼠标移入背景色是粉色	
		item.onmouseover=function () {
	      item.style.backgroundColor='pink';
		}

		//3.鼠标离开还是之前的颜色
		item.onmouseout=function () {
			item.style.backgroundColor=bg;
		}
		})(i)
	}	   
</script>

</body>
</html>