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

开发 前端
你对CSS隔行换色的方法你是否了解,这里和大家分享一下四种实现CSS隔行换色的方法,相信本文介绍一定会让你有所收获。

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

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

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

一、background背景图片

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

二、CSSExpression

  文字:

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

   背景:

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

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

三、class分别定义

ExampleSourceCode 

  1. <ul> 
  2. <liclassliclass="bgcolor">...  
  3. <li>...  
  4. <liclassliclass="bgcolor">...  
  5. <li>...  
  6. </ul> 
  7.  

实实在在的写法。

四、通过JS看实例

SourceCodetoRun

  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> 
  6. <title>www.52CSS.com-四种实现CSS隔行换色的方法</title> 
  7. <linkhreflinkhref="index.css"rel="stylesheet"type="text/css"/> 
  8. <scripttypescripttype="text/javascript"> 
  9. functionbgChange(){  
  10. if(!document.getElementsByTagName)returnfalse;  
  11. vartables=document.getElementsByTagName("table");  
  12. for(vari=0;i<tables.length;i++){  
  13. varodd=false;  
  14. trs=tables[i].getElementsByTagName("tr");  
  15. for(varj=0;j<trs.length;j++){  
  16. if(odd==true){  
  17. trs[j].style.background="#ccc";  
  18. odd=false;  
  19. }else{  
  20. odd=true;  
  21. }  
  22. }  
  23. }  
  24. }  
  25. window.onload=bgChange;  
  26. </script> 
  27. </head> 
  28. <body> 
  29. <tablewidthtablewidth="600"border="0"align="center"cellpadding="0"  
  30. cellspacing="0"> 
  31. <tr> 
  32. <td>测试文字</td> 
  33. <td>测试文字</td> 
  34. <td>测试文字</td> 
  35. </tr> 
  36. </table> 
  37. <scripttypescripttype='text/javascript'> 
  38. //<![CDATA[  
  39. if(document.getElementById('processtime'))document.
  40. getElementById('processtime').innerHTML="<spanclass='runtimedisplay'>  
  41. Runin184ms,9Queries.</span>";  
  42. //]]> 
  43. </script></body> 
  44. </html> 

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

【编辑推荐】

  1. 提高CSS文件可维护、可读性四大技巧
  2. CSS网页布局中文字排版九大技巧
  3. 解析CSS网页布局的意义与副作用
  4. 实用但不被IE支持的十大CSS属性
  5. CSS中id与class命名规则及编码最佳习惯
责任编辑:佚名 来源: 52css.com
相关推荐

2010-07-16 13:50:53

Perl哈希表

2020-01-21 19:15:23

漏洞安全IT

2014-03-17 09:22:43

Linux命令

2022-09-02 14:29:01

JavaScrip数组属性

2021-06-09 10:10:43

数字化转型IT领导者

2016-06-28 10:19:31

云计算云安全

2009-11-23 15:57:51

PHP伪静态

2021-03-10 10:13:39

爬虫Python代码

2011-06-22 15:21:08

XML

2009-02-25 09:52:14

类型转换.NET 强制转型

2023-02-03 08:47:20

职位招聘难题

2009-03-31 13:12:30

解析XMLJava

2020-08-10 00:30:55

备份密码iPhone移动安全

2022-06-14 08:50:18

Python交互式仪表板代码

2022-11-04 13:35:29

IT远程工作混合工作

2022-12-07 10:28:22

2021-09-23 10:30:21

Docker RegiHarborLinux

2011-05-19 10:44:01

2010-03-15 10:01:26

Ubuntu 系统

2022-07-15 14:43:21

数据安全Linux
点赞
收藏

51CTO技术栈公众号