IE的setAttribute bug

IE的setAttribute bugIE的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属性赋值比较安全。

你可能感兴趣的:(attribute)