好学IT学院：IT信息技术分享交流平台
好学网>>好学IT学院>软件开发技术>>Web前端技术
IE与FireFox下class与className的区别
来源：互联网  作者：本站整理  发布时间：2009-06-30  ★★★〖加入收藏〗〖手机版〗
摘要：今天在做表格效果发现以前的表格交替前景和突出显示在IE7和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>

IEFireFoxclassclassName区别
·数据中心系统管理员必须了解和遵守的六大铁律
数据中心系统管理员必须了解和遵守的六大铁律
  在复杂的数据中心基础设施中，这种能力可以让你通过丰富的经验和自身的知识快速而准确地发现问题之所在。这种能力只可意会，不可言传。没有…
  • 好学考试H5触屏版开放内测
  • 好学触屏公众号虎力全开、杨帆起航！