Li隔行变色实现方式

<!DOCTYPE HTML >
<html>
 <head>
  <title> New Document </title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

	<!-- jQuery文件-->
	<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
	<script>
		window.onload=function(){
		//JS实现隔行变色
		
		//1.使用ntch-child属性来控制,有兼容性问题
		/*
			$("#contains li:nth-child(even)").css("background": "#c4c4c4");
			$("#contains li:nth-child(odd)").css("background": "#d6fcc9");
		*/
		
		//2. 使用Jquery来遍历控制
		/*	
			$("#contains li").each(function(index, element){
				if(index%2==0){
					$(this).css("background", "#c4c4c4");
				}else{
					$(this).css("background", "#d6fcc9");
				}
			});
		*/
		
		//3. 使用纯JS来控制
		
			var oLi = document.getElementById("contains").getElementsByTagName("li");;
			
			for(var i=0;i<oLi.length;i++){
				if(i%2==0){
					oLi[i].style.backgroundColor="green";
				}else{
					oLi[i].style.backgroundColor="#d6fcc9";
				}
			}
		
		}
   </script>
  <style>
	#contains{}
	/* css控制隔行变色  有兼容性问题 */
/*	#contains li:nth-child(even){background:#c4c4c4}*/
/*	#contains li:nth-child(odd){background:#d6fcc9} */
  </style>
 </head>

 <body>
	<h2>使用css和js来实现隔行变色的几种方式</h2>
 
	<ul id="contains">
		<li>LLL</li>
		<li>LLL</li>
		<li>LLL</li>
		<li>LLL</li>
		<li>LLL</li>
	</ul>
 </body>
</html>


你可能感兴趣的:(Li隔行变色实现方式)