好学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触屏版开放内测