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

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

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug  By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        var form = document.createElement("form");

        var input = document.createElement("input");

        var root = document.body;

        input.setAttribute("name", "test");

        root.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏

        form.appendChild(input);

        alert(form.elements.test)

      }

    </script>

  </head>

  <body>

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

  </body>

</html>

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

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        var body = document.body;

        var form = document.createElement("form");

        form.innerHTML = "<input name='test' type='text' />"

        body.appendChild(form);

        alert(form.elements.test)

      }

    </script>

  </head>

  <body>

    <h3>请在IE6与IE7下浏览</h3>

  </body>

</html>

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

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        var body = document.body;

        var form = document.createElement("form");

        try{

          var input = document.createElement("<input type='text' name='test'>");

        }catch(e){

          var input = document.createElement("input");

          input.setAttribute("name", "test")

        }

        body.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏

        form.appendChild(input);

        alert(form.elements.test)

      }

    </script>

  </head>

  <body>

    <h3>请在IE6与IE7下浏览</h3>

  </body>

</html>

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

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        var body = document.body;

        var form = document.createElement("form");

        form.innerHTML = "<input name='test' type='text' />"

        body.appendChild(form);

        form.elements.test.setAttribute("onfocus", "alert(this.name)");

      }

    </script>

  </head>

  <body>

    <h3>用setAttribute设置事件</h3>

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

  </body>

</html>

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)");

}

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        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)");

        }

      }

    </script>

  </head>

  <body>

    <h3>IE用setAttribute设置事件要直接赋函数！</h3>

  </body>

</html>

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

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

       var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;';

        var h3 = document.getElementsByTagName("h3")[0]

        h3.setAttribute('style', styleData);

      }

    </script>

  </head>

  <body>

    <h3>IE6与IE7看不到效果！</h3>

  </body>

</html>

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

<!doctype html>

<html dir="ltr" lang="zh-CN">

  <head>

    <meta charset="utf-8"/>

    <title>setAttribute bug By 司徒正美</title>

    <meta http-equiv="X-UA-Compatible" content="IE=7">

    <script type="text/javascript">

      window.onload = function(){

        var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;';

        var h3 = document.getElementsByTagName("h3")[0]

        if(!+"\v1"){

          //use the .cssText hack

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

        } else {

          //use the correct DOM Method

          h3.setAttribute('style', styleData);

        }

      }

    </script>

  </head>

  <body>

    <h3>h3.style.setAttribute('cssText', styleData);</h3>

  </body>

</html>

总结：各个浏览器的标准的不统一确实给我们在网站制作的过程中带来很多的麻烦，遇到这种问题也是我们特别头痛的事情，这时我们试着换一种思路来考虑问题，可能也会得到异曲同工之妙。最后，我个人感觉这个问题也并不能说是IE浏览器的问题，只能说w3c在制定标准的时候欠缺全面的考虑！逼近很多标签是IE浏览器制定的。

IE浏览器存在的setAttribute bug的更多相关文章

  1. margin和padding那点事及常见浏览器margin padding相关Bug

    用Margin还是用Padding 何时应当使用margin: 需要在border外侧添加空白时. 空白处不需要背景(色)时. 上下相连的两个盒子之间的空白,需要相互抵消时.如15px + 20px的 ...

  2. 浏览器缓存引起的bug总结

    缓存原理 浏览器缓存分为强缓存和协商缓存 先检查是否过期,没有过期直接使用本地缓存.如果过期,查看是否使用协商缓存 协商缓存流程: 后端返回headers: ETag: W/"1e3-175 ...

  3. 浏览器中CSS的BUG

    对于web2.0的过度,请尽量用xhtml格式写代码,而且DOCTYPE 影响 CSS 处理,作为W3C的标准,一定要加 DOCTYPE声明. 其它请参考:CSS hack 针对IE6,IE7,fir ...

  4. IE浏览器兼容 css之bug 问题

    bug的几种常见原因: 1.盒模型bug      原因:没有正确声明doctype(如果没有声明doctype,各浏览器对代码的解析有不同的规范).解决方法:使用严格的doctype声明. 2.各浏 ...

  5. Javascript substr方法在某些浏览器下行为出现BUG的补丁代码

    主要思路是使用兼容性和稳定性都保持一致的substring方法重写/覆盖substr /** * String.substr() bug fix * @param start * @param len ...

  6. 修复CefSharp浏览器组件中文输入Bug

    概述 最近在win10上开发wpf应用,需要将CefSharp中wpf版本的浏览器组件(版本号v51.0.0)嵌入到应用中,但是发现不支持中文输入,GitHub上有这个问题的描述,参照其提到的方法可以 ...

  7. vs2017 .net core 项目调试浏览器网页闪退Bug

    from:https://blog.csdn.net/qq_36330228/article/details/82152187 vs更新2017最新版本后,项目调试浏览器莫名其妙出现闪退,每次都TMD ...

  8. 关于chrome浏览器事件拖动的bug（首次点击的时候也触发move的事件）

    在做R80web的时候出现一个奇怪的现象,chorme现在的版本还是存在,拖动事件有mousedown.mousemove.mouseup组成,但是首次click以及失去焦点再重新点击的时候同样会触发 ...

  9. （asp.net）百度浏览器Cookie的神奇bug

    HttpCookie cookie = new HttpCookie("version"); cookie.Value = "1.1"; cookie.Expi ...

随机推荐

  1. Javascript中的对象和原型(一)（转载）

    面向对象的语言(如Java)中有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象.但是,JavaScript 没有类的概念,因此它的对象也与基于类的语言中的对象有所不同. 要了解面向对象,首 ...

  2. Genral log（普通日志）与 Slow log（慢速日式）

    General log: Geleral log记录了服务器接收到的每一个查询或是命令,无论这些查询或是命令是否正确甚至是否包含语法错误,general log 都会将其记录下来 ,记录的格式为 {T ...

  3. IOS基于XMPP协议开发－－XMPPFramewok框架（一）：基础知识

    最近蘑菇街团队的TT的开源,使我对im产生了兴趣,然后在网上找到了XMPPFramework进行学习研究, 并写了以下系列教程供大家参考,有写的不对的地方,请大家多多包涵指正. 目录索引 IOS基于X ...

  4. JACKSON JSON 操作帮助类

    一. 引入POM <dependency> <groupId>net.sf.json-lib</groupId> <artifactId>json-li ...

  5. 419. Roman to Integer【medium】

    Given a roman numeral, convert it to an integer. The answer is guaranteed to be within the range fro ...

  6. 上传图片流到服务器(AFN方法) (多张图片)(图片流)

      上传图片流到服务器(AFN方法) (多张图片)(图片流) 第一步//获取图片 UIAlertController *actionSheet = [UIAlertController alertCo ...

  7. 解决Access denied for user &#39;&#39;@&#39;localhost&#39; to database &#39;mysql&#39;问题

    在改动mysql的root用户password后,再登陆,提示如标题的错误,找了一番答案之后,最终解决,过程例如以下: 1.停掉mysql:      service mysqld stop 2.使用 ...

  8. Unix系统编程（）在文件特定偏移量处的IO：pread和pwrite

    首先我想问的是这两个p代表的是什么? 系统调用pread和pwrite完成与read和write相类似的工作,只是前两者会在offset参数所指定的位置进行文件IO操作,而非始于文件的当前偏移量处,并 ...

  9. javascript 实现java中的Map

    javascript实现java中的Map,代码是在国外的一个网站上看到的(http://stackoverflow.com/questions/368280/javascript-hashmap-e ...

  10. malloc 函数本身并不识别要申请的内存是什么类型

    malloc 函数本身并不识别要申请的内存是什么类型,它只关心内存的总字节数.我 们通常记不住 int, float 等数据类型的变量的确切字节数. 例如 int 变量在 16 位系统 下是 2 个字 ...