IE6/7 浏览器存在的setAttribute bug

阅读更多
版权声明:转载时请以超链接形式标明文章原始出处和作者信息及本声明
文章引用地址:http://www.iefans.net/ie-setattribute-bug/ 作者:iefans

IE的setAttribute中与标准浏览器的有许多不同,主要表现在IE对setAttribute的功能上有些限制,就是不能用setAttribute来设定class、style于onclick等事件的值以及设置name属性,那这样就会导致setAttribute在IE浏览器里失去很多的用途!而在IE6,IE7中,如果动态生成input元素,是无法为其设置name属性的。不过当然这bug已经在最新版的IE8中被修复,详情可以浏览微软官网给出的资料。由于name属性对表单元素非常重要(在提交表单时,与value属性组成键值对,发送到后台),因此必须留意这个bug。

微软的相关资料:NAME Attribute | name Property


 
   
    setAttribute bug  By 司徒正美
   
   

 
 
   

请在IE6与IE7下浏览,当然IE8也可以,我已让IE8处在IE7的兼容模式下运作。兼容模式连bugs也兼容了……


 


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




 
   
    setAttribute bug By 司徒正美
   
   

 
 
   

请在IE6与IE7下浏览


 


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




 
   
    setAttribute bug By 司徒正美
   
   

 
 
   

请在IE6与IE7下浏览


 


但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设置事件。



 
   
    setAttribute bug By 司徒正美
   
   
 
 
   

用setAttribute设置事件


   

在IE下文本域获得焦点后并没有弹出预期的alert!


 

IE要直接赋给一个函数!
var body = document.body;
var form = document.createElement("form");
form.innerHTML = ""
body.appendChild(form);
if(!+"\v1"){
  form.elements.test.setAttribute("onfocus", function(){alert(this.name)});
}else{
  form.elements.test.setAttribute("onfocus", "alert(this.name)");
}




 
   
    setAttribute bug By 司徒正美
   
   
 
 
   

IE用setAttribute设置事件要直接赋函数!


 

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



 
   
    setAttribute bug By 司徒正美
   
   
 
 
   

IE6与IE7看不到效果!


 

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




 
   
    setAttribute bug By 司徒正美
   
   
 
 
   

h3.style.setAttribute('cssText', styleData);


 

你可能感兴趣的:(ie)