Ruby's Louvre

每天学习一点点算法

导航

IE的setAttribute bug

IE的setAttribute中与标准浏览器的有许多不同，一不小心地踩雷。你不能用它来设置name属性，你也不能在元素加入DOM后设置type属性，也不能用它直接设置内联事件（ inline event handlers），也不能用它设置样式……

在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。当然这bug已经在IE8中被修复，详见这里。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。

解决办法有两个，如用innerHTML，觉得innerHTML真是一个伟大的发明，连火狐与W3C那帮死对头也不得不屈服。

另一个利用IE强大的createElement特征，它能在创建元素的同时，连属性也一起创建。

但name只是冰山一角，setAttribute在设置属性时，有许多属性在IE下与标准浏览器的命名是不一样的，看一下jQuery，发现它也是不全的。许多地雷埋在这里，总有一个你迟早会中的。下面是一个详尽的参照表：左边为标准游览器的，右边是IE的。

        var IEfix = {
          acceptcharset: "acceptCharset",
          accesskey: "accessKey",
          allowtransparency: "allowTransparency",
          bgcolor: "bgColor",
          cellpadding: "cellPadding",
          cellspacing: "cellSpacing",
          "class":  "className",
          colspan:  "colSpan",
          checked: "defaultChecked",
          selected: "defaultSelected",
          "for":  "htmlFor" ,
          frameborder:  "frameBorder",
          hspace:  "hSpace",
          longdesc:  "longDesc",
          maxlength:  "maxLength",
          marginwidth:  "marginWidth",
          marginheight:  "marginHeight",
          noresize:  "noResize",
          noshade:  "noShade",
          readonly: "readOnly",
          rowspan:  "rowSpan",
          tabindex:  "tabIndex",
          valign:  "vAlign",
          vspace:  "vSpace"
        }

IE不能用setAttribute为dom元素设置onXXX属性，换言之，不能用setAttribute设置事件。

IE要直接赋给一个函数！

        var body = document.body;
        var form = document.createElement("form");
        form.innerHTML = "<input name='test' type='text' />"
        body.appendChild(form);
        if(!+"\v1"){
          form.elements.test.setAttribute("onfocus", function(){alert(this.name)});
        }else{
          form.elements.test.setAttribute("onfocus", "alert(this.name)");
        }

在IE6与IE7中也不能用setAttribute设置样式:dom.setAttribute("style","font-size:14px")

这时要统一用dom元素的style.csstext属性赋值比较安全。

posted on 2009-12-01 09:56  司徒正美  阅读(4283)  评论(11)    收藏  举报