四种方法轻松实现CSS隔行换色-css隔行换色

本文和大家重点讨论一下四种实现CSS隔行换色的方法，它们分别是background背景图片，CSSExpression，使用class分别定义，通过JS看实例，希望本文介绍对你有所帮助。

四种实现CSS隔行换色的方法

CSS隔行换色的问题，其实很简单，您可以根据您的需要，采用下面的任何一种方法，当然，要适合你的编码与需求情况：

一、background背景图片

　　如果行高固定的话，推荐使用背景图，也推荐将行高固定！兼容一切浏览器。

二、CSSExpression

　　文字：

color:expression(this.sourceIndex%2?'#ff0000':'#000000');

　　背景：

background-color:expression(this.sourceIndex%2?'#ff0000':'#000000');

　　注意：本方法浏览器兼容度不够，不支持FF3。

三、class分别定义

ExampleSourceCode

<ul> 
<liclassliclass="bgcolor">...  
<li>...  
<liclassliclass="bgcolor">...  
<li>...  
</ul>

实实在在的写法。

四、通过JS看实例

SourceCodetoRun

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
<title>www.52CSS.com-四种实现CSS隔行换色的方法</title> 
<linkhreflinkhref="index.css"rel="stylesheet"type="text/css"/> 
<scripttypescripttype="text/javascript"> 
functionbgChange(){  
if(!document.getElementsByTagName)returnfalse;  
vartables=document.getElementsByTagName("table");  
for(vari=0;i<tables.length;i++){  
varodd=false;  
trs=tables[i].getElementsByTagName("tr");  
for(varj=0;j<trs.length;j++){  
if(odd==true){  
trs[j].style.background="#ccc";  
odd=false;  
}else{  
odd=true;  
}  
}  
}  
}  
window.onload=bgChange;  
</script> 
</head> 
<body> 
<tablewidthtablewidth="600"border="0"align="center"cellpadding="0"  
cellspacing="0"> 
<tr> 
<td>测试文字</td> 
<td>测试文字</td> 
<td>测试文字</td> 
</tr> 
</table> 
<scripttypescripttype='text/javascript'> 
//<![CDATA[  
if(document.getElementById('processtime'))document.
getElementById('processtime').innerHTML="<spanclass='runtimedisplay'>  
Runin184ms,9Queries.</span>";  
//]]> 
</script></body> 
</html>

[可先修改部分代码再运行查看效果]

【编辑推荐】