菜鸟求助，为什么样式会还原？

   刷新一下会发现字体大小改变过，一闪又恢复了。<!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>
    <title></title>
    <script type="text/javascript">
        function initEvrent() {
            var tab1 = document.getElementById("tab1");
            var trs = tab1.getElementsByTagName("tr");
            for (var i = 0; i < trs.length; i++) {
                 var tr1 = trs[i];
                if (i == 0) {
                    tr1.style.fontSize = "30px";
                }
                if (i > 0 || i < 4) {
                    tr1.style.fontSize = "25px";
                }              
            }
        }
    </script>
</head>
<body  onunload="initEvrent()">
<table id="tab1">
    <tr><td>姓名</td><td>成绩</td></tr>
    <tr><td>tom</td><td>96</td></tr>
    <tr><td>jim</td><td>89</td></tr>
    <tr><td>li</td><td>68</td></tr>
    <tr><td>wang</td><td>87</td></tr>
    <tr><td>liu</td><td>18</td></tr>
    <tr><td>zhao</td><td>59</td></tr>
    <tr><td>平均分</td><td>xxx</td></tr>
</table>
</body>
</html>

解决方案 »

  1.   


    <!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>
        <title></title>
        <script type="text/javascript">
            function initEvrent() {
                var tab1 = document.getElementById("tab1");
                var trs = tab1.getElementsByTagName("tr");
                for (var i = 0; i < trs.length; i++) {
                     var tr1 = trs[i];
                    if (i == 0) {
                        tr1.style.fontSize = "30px";
                    }
                    if (i > 0 &&i < 4) {
                        tr1.style.fontSize = "25px";
                    } 
                     if (i % 2 != 0) {
                         tr1.style.color = "red";
                     }             
                }
            }
        </script>
    </head>
    <body>
    <table id="tab1">
        <tr><td>姓名</td><td>成绩</td></tr>
        <tr><td>tom</td><td>96</td></tr>
        <tr><td>jim</td><td>89</td></tr>
        <tr><td>li</td><td>68</td></tr>
        <tr><td>wang</td><td>87</td></tr>
        <tr><td>liu</td><td>18</td></tr>
        <tr><td>zhao</td><td>59</td></tr>
        <tr><td>平均分</td><td>111</td></tr>
    </table>
    <input type="button" value="点击" onclick="initEvrent()" />
    </body>
    </html>
    用 button的话 是正常的 但我想页面一加载就变。。
      

  2.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <title></title>
      <script type="text/javascript">
      function initEvrent() {
          var tab1 = document.getElementById("tab1");
          var trs = tab1.getElementsByTagName("tr");
          for (var i = 0; i < trs.length; i++) {
              var tr1 = trs[i];
              if (i == 0) {
                tr1.style.fontSize = "50px";
              }
              else if (i > 0 && i < 4) {
                tr1.style.fontSize = "20px";
              }   
              else 
                tr1.style.fontSize="10px";
          }
      }
      </script>
    </head>
    <body onload="initEvrent()">
    <table id="tab1">
      <tr><td>姓名</td><td>成绩</td></tr>
      <tr><td>tom</td><td>96</td></tr>
      <tr><td>jim</td><td>89</td></tr>
      <tr><td>li</td><td>68</td></tr>
      <tr><td>wang</td><td>87</td></tr>
      <tr><td>liu</td><td>18</td></tr>
      <tr><td>zhao</td><td>59</td></tr>
      <tr><td>平均分</td><td>xxx</td></tr>
    </table>
    </body>
    </html>
      

  3.   

    <body onunload="initEvrent()">原来是这句话。。onload . 白瞎眼了。。