写了个自由放大或缩小表格的函数--竟然无法缩小？？？why？？

上代码 大师们来围观！请给点指示！感激涕零啊！
<!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>
<script language=javascript>
//******************************************************************
//参数BossID 指定大容器的ID
//参数BossName 指定大容器ID内的小容器名称
//shengming D放大 X缩小 不是D或X就把容器高度设定为28px
//******************************************************************
function ZiYouHigh(BossID,BossName,shengming) { 
  
  var MuBiao = document.getElementById(BossID).getElementsByTagName(BossName);
  for (var i = 0; i < MuBiao.length; i ++) {
   var RongQiJiuHigh=MuBiao[i].offsetHeight;    
   
   MuBiao[i].style.Height=RongQiJiuHigh+"px";        //先获取当前容器高度
   
   var HighDuShu = MuBiao[i].style.Height; 
   
   HighDuShu=HighDuShu.substr(0,HighDuShu.length-2);           //去掉px字符
       
     if(shengming == "da")
       { var RongQiXinHigh=RongQiJiuHigh + 1; }
     else if(shengming == "xiao")
       { var RongQiXinHigh=RongQiJiuHigh - 1; }
 else
   { var RongQiXinHigh=28;}
  
   MuBiao[i].style.Height=RongQiXinHigh+"px";        //调整容器高度
   MuBiao[i].style.lineHeight=RongQiXinHigh+"px";    //调整容器上下居中        
  }
  
}
</script>
</head>
<body>
<h5>是不是可以更精简一些？</h5><table width="500" border="1" bordercolor="#CCCCCC" id="CEshi">
  <tr>
    <td>A</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>B</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>C</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>D</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>E</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>F</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table><input type="button" name="button4" value="缩小" onClick="ZiYouHigh('CEshi','tr','xiao');" /> <input type="button" name="button4" value="恢复" onClick="ZiYouHigh('CEshi','tr','huifu');" /> <input type="button" name="button4" value="放大" onClick="ZiYouHigh('CEshi','tr','da');" />
</body>
</html>
为什么不能缩小？？why？！！代码请大师们给精简一下  感谢感谢！鄙人皮毛知识 千万别笑呵呵

解决方案 »

  1.   


    function ZiYouHigh(BossID, BossName, shengming) {
        var MuBiao = document.getElementById(BossID).getElementsByTagName(BossName);
        var RongQiJiuHigh = (MuBiao[0].hasAttribute('style')) ? parseInt(MuBiao[0].getAttribute('style').replace('line-height:', '').replace('px;', '')) : MuBiao[0].offsetHeight;
        var RongQiXinHigh = 28;
        if (shengming == "da") {
            RongQiXinHigh = RongQiJiuHigh + 1;
        } else if (shengming == "xiao") {
            RongQiXinHigh = RongQiJiuHigh - 1;
        }
        for (var i = 0; i < MuBiao.length; i++) {
            MuBiao[i].style.Height = RongQiXinHigh + "px";
            MuBiao[i].style.lineHeight = RongQiXinHigh + "px";
        }
    }
      

  2.   

    <!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>
    tr{
     
    height:28px;
    }
    </style>
    <script language=javascript>
    //******************************************************************
    //参数BossID 指定大容器的ID
    //参数BossName 指定大容器ID内的小容器名称
    //shengming D放大 X缩小 不是D或X就把容器高度设定为28px
    //****************************************************************** 
    function ZiYouHigh(BossID,BossName,shengming) { 
      var MuBiao = document.getElementById(BossID).getElementsByTagName(BossName);
      for (var i = 0; i < MuBiao.length; i ++) {
      var RongQiJiuHigh=MuBiao[i].offsetHeight;  
       if(shengming == "da")
           {RongQiJiuHigh++}
       else if(shengming=="xiao")
       {RongQiJiuHigh-- }
     else { RongQiJiuHigh=28}
       MuBiao[i].style.height=RongQiJiuHigh+"px";        //调整容器高度
       // MuBiao[i].style.lineHeight=RongQiJiuHigh+"px";    //调整容器上下居中        
      }
      
    }
    </script>
    </head>
    <body>
    <h5>是不是可以更精简一些？</h5><table width="500" border="1" bordercolor="#CCCCCC" id="CEshi">
      <tr>
        <td>A</td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td>B</td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td>C</td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td>D</td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td>E</td>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td>F</td>
        <td> </td>
        <td> </td>
      </tr>
    </table><input type="button" name="button4" value="缩小" onClick="ZiYouHigh('CEshi','tr','xiao');" /> <input type="button" name="button4" value="恢复" onClick="ZiYouHigh('CEshi','tr','huifu');" /> <input type="button" name="button4" value="放大" onClick="ZiYouHigh('CEshi','tr','da');" /></body>
    </html>