今天又发现一ie的button在css方面上的bug,firefox就正常.

posted by David Chen at February 23, 2008, 4:30 AM    

动态改变按纽样式 按纽背景
应老大的要求,学务系统的所有按纽都要有动态效的修改,因为按纽实在太多了,不可能一个个的去改吧,这样的话,
可能还会出现很多未知的错误,就想到用一些js增动态改变按纽的样式, text, checkbox, 等都可以不理的了,
如果用 className的方法,在 ie下没变化,firefox下正常, 就是发现了这个问题,浪费了我很多时间,看来
ie还未完全支持标准的xhtml, 害我必须每个style的值都要赋一次,.
要就要处理 type='button' 方面的,..
看代码: 有种按纽,一种是 不超过两个字符的,一种是超过两个字符的.

  <style> // 首页定义一系列样式,在改变的时候用className改变style
  ._normal1 { // 不超过两个字符的样式
   border: 0px; background: url('images/_1.jpg') no-repeat;
   width: 49px; height: 22px;
  }
  ._normal2 { //超过两个字符的按纽的样式
   border: 0px; background: url('images/_2.jpg') no-repeat;
   width: 49px; height: 22px;
  }
  ._normal3 {
   border: 0px; background: url('images/_3.jpg') no-repeat;
   width: 94px; height: 22px;
  }
  ._normal4 {
   border: 0px; background: url('images/_4.jpg') no-repeat;
   width: 94px; height: 22px;
  }
  </style>
  <script type='text/javascript'>
      function change_button( but ) {
// 如果是按纽就处理, 不是就跳过
    if( but.type != 'button' && but.type != 'BUTTON' )
     return ;
    if(true) {
        var img1 = '';
     var img2 = '';
        var ln = but.value.length;
     //but.className = '_normal3';
// 如果用 className的方法,在 ie下没变化,firefox下正常
     but.style.border = '0px';
     but.style.height = '22';
     if( ln > 2 ) { // 概据长度用不同的样式
         but.style.width = '94';
      img1 = 'url(images/_3.jpg)';
      img2 = 'url(images/_4.jpg)';
     }
     else {
         but.style.width = '49';
      img1 = 'url(images/_1.jpg)';
      img2 = 'url(images/_2.jpg)';
     }
     but.style.background = img1;
     but.onmouseover = function() {
      //this.className = '_normal4';
      this.style.background = img2;
     };
     but.onmouseout = function() {
      //this.className = '_normal3';
      but.style.background = img1;
     };
    }
   }
      function change_buttons_style() {
    var _inputs = document.getElementsByTagName('INPUT');
    try { // 可能是数组,可能是单个按纽对象
     for( var c=0; c<_inputs.length; c++ ) {
      change_button( _inputs[c] );
     }
    }
    catch(e) {
     change_button( _inputs );
    }
   }
   change_buttons_style();
  </script>