四种方法轻松实现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

实实在在的写法。

四、通过JS看实例

SourceCodetoRun

 
 
 
  
  
  
  
  
  
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  
  
   
  
  
   
  
  
   
  
  
  www.52CSS.com-四种实现CSS隔行换色的方法 
  
  
   
  
  
   
  
  
  functionbgChange(){  
  
  
  if(!document.getElementsByTagName)returnfalse;  
  
  
  vartables=document.getElementsByTagName("table");  
  
  
  for(vari=0;i
  
  
  
varodd=false;  
  
  
  trs=tables[i].getElementsByTagName("tr");  
  
  
  for(varj=0;j
  
  
  
if(odd==true){  
  
  
  trs[j].style.background="#ccc";  
  
  
  odd=false;  
  
  
  }else{  
  
  
  odd=true;  
  
  
  }  
  
  
  }  
  
  
  }  
  
  
  }  
  
  
  window.onload=bgChange;  
  
  
   
  
  
   
  
  
   
  
  
  
  
  
  
cellspacing="0"> 
  
  
   
  
  
  测试文字 
  
  
  测试文字 
  
  
  测试文字 
  
  
   
  
  
   
  
  
   
  
  
  //
  
  
  
if(document.getElementById('processtime'))document.
  
  
  getElementById('processtime').innerHTML="  
  
  
  Runin184ms,9Queries.";  
  
  
  //]]>

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

【编辑推荐】

提高CSS文件可维护、可读性四大技巧
CSS网页布局中文字排版九大技巧
解析CSS网页布局的意义与副作用
实用但不被IE支持的十大CSS属性
CSS中id与class命名规则及编码最佳习惯

文章名称：四种方法轻松实现CSS隔行换色
分享URL：http://www.shufengxianlan.com/qtweb/news37/370837.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容