IE与FireFox下class与className的区别
今天在做表格效果发现以前的表格交替前景和突出显示在IE7和FireFox最新版中竟然有点问题，关键就在于这个class和className上:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格样式控制备选</title>
<style type="text/css">
table{
border:1px solid #258BDE;
}
td{
font-size:13px;
color:#000000;
border-right:1px solid #B6D7F8;
border-bottom:1px solid #B6D7F8;
padding-left:6px;
padding-top:4px;
padding-bottom:4px;
height:24px;
vertical-align:middle;
}
tr.trbg1{background-color:#FFFFFF}
tr.trbg2{background-color:#E6F0FB}
tr.trbg3{background:#98D8FA}
</style>
<script language="javascript">
function changebg(trid){
var tb = document.getElementById(trid);
tb.setAttribute("class","trbg3 "+tb.getAttribute("class"))
tb.setAttribute("className","trbg3 "+tb.getAttribute("className"));
}
function defaultbg(trid){
var tb = document.getElementById(trid);
tb.setAttribute("class",tb.getAttribute("class").replace("trbg3",""))
tb.setAttribute("className",tb.getAttribute("className").replace("trbg3",""));
}
</script>
</head>
<body>
<table width="557" border="0" cellspacing="0" cellpadding="0" id="tb">
<tr class="trbg2">
<td align="center">1001</td>
<td align="center">Jim</td>
<td align="center">jim@msn.com</td>
<td align="center">jim@msn.com</td>
</tr>
<tr class="trbg1">
<td align="center">1002</td>
<td align="center">John</td>
<td align="center">john@hotmail.com</td>
<td align="center">john@hotmail.com</td>
</tr>
<tr class="trbg2">
<td align="center">1003</td>
<td align="center">Lucy</td>
<td align="center">lucy@163.com</td>
<td align="center">lucy@hotmail.com</td>
</tr>
<tr class="trbg1">
<td align="center">1004</td>
<td align="center">Lily</td>
<td align="center">lily@sina.com.cn</td>
<td align="center">lily@hotmail.com</td>
</tr>
<tr class="trbg2">
<td align="center">1005</td>
<td align="center">Joyce</td>
<td align="center">Joyce@sohu.com</td>
<td align="center">Joyce@hotmail.com</td>
</tr>
<tr class="trbg1">
<td align="center">1006</td>
<td align="center">Tom</td>
<td align="center">tom@21.cn</td>
<td align="center">tom@hotmail.com</td>
</tr>
<tr class="trbg2">
<td align="center">1007</td>
<td align="center">Kite</td>
<td align="center">kite@126.com</td>
<td align="center">kite@msn.com</td>
</tr>
<tr class="trbg1">
<td align="center">1008</td>
<td align="center">Marry</td>
<td align="center">marray@163.com</td>
<td align="center">marray@msn.com</td>
</tr>
<tr class="trbg2">
<td align="center">1009</td>
<td align="center">Sunny</td>
<td align="center">sunny@126.com</td>
<td align="center">sunny@msn.com</td>
</tr>
<tr class="trbg1">
<td align="center">1010</td>
<td align="center">Jogo</td>
<td align="center">jogo@sohu.com</td>
<td align="center">jogo@msn.com</td>
</tr>
<tr class="trbg2">
<td align="center">1011</td>
<td align="center">Parry</td>
<td align="center">parry@yahoo.com.cn</td>
<td align="center">parry@msn.com</td>
</tr>
</table>
