html嵌套css隔行变色,CSS应用中实现隔行换色的四种方法

1、background背景图片

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

2、CSS Expression

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

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

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

3、class分别定义

• ...
• ...
• ...
• ...

实实在在的写法。

4、通过JS 看实例

www.bdky.cn CSS应用中实现隔行换色的四种方法

function bgChange(){

if(!document.getElementsByTagName) return false;

var tables = document.getElementsByTagName("table");

for(var i=0; i

var odd = false;

trs = tables[i].getElementsByTagName("tr");

for(var j=0; j

if(odd==true){

trs[j].style.background = "#ccc";

odd = false;

}else{

odd = true;

}

}

}

}

window.onload = bgChange;

测试	测试	测试
测试	测试	测试
测试	测试	测试
测试	测试	测试
测试	测试	测试
测试	测试	测试
测试	测试	测试
测试	测试	测试
测试	测试	测试
测试	测试	测试

//

if (document.getElementById('processtime')) document.getElementById('processtime').innerHTML="Run in 184 ms, 9 Queries.";

//]]>