html中p标签隔行换色,javascript和Css实现隔行换色的几种方法

隔行换色通常用在列表页中，目的是让用户看的清楚每一行，通常有几种方法实现。

1、使用bgcolor属性

2、平铺背景图片

3、CSS类定义

4、纯CSS打造

5、js实现

第一种：也是最基本的，使用bgcolor属性

[code]

[/code]

也可在程序中动态输出bgcolor中的值。

第二种，平铺图片，使用一张隔行换色的图片作为背景图片

[code]

[/code]

这种方法有一个缺点就是：表格的高度要等于图片高度的一半。

第三种方法，使用CSS类，先定义两个类，每个类对应不同的颜色，使用的方法和方法一差不多

[code]

.t1{

background-color:yellow;

}

.t2{

background-color:orange;

}

[/code]

第四种方法：纯CSS打造

[code]

tr{ yexj00:expression(this.style.background=(rowIndex%2==1)?’orange’:’yellow’)}

[/code]

此方法有个缺点，只支持IE

第五种，纯javascript打造

[code]

td{

height:20px;

}

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 = "orange";

odd = false;

}else{

trs[j].style.background = "yellow";

odd = true;

}

}

}

}

window.onload = bgChange;

[/code]