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. CentOS中安装JDK与Intellij idea

    卸载CentOS中自带openjdk CentOS自带openjdk,可以先用java –version检测是否存在jdk版本.如果存在,最好在安装oracle的jdk之前最好卸载,可以使用如下指令 ...

  2. Spring Cloud(四)：熔断器Hystrix

    熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基础服务的故障可能会导致级联故障,进而造成整个系统不可用的情况,这种现象被称为服务雪崩效应.服务雪崩效应是一种因“服务提供者”的不可用导致“服务 ...

  3. SpringCloud-服务注册与发现

    这里我们会用到Spring Cloud Netflix,该项目是Spring Cloud的子项目之一,主要内容是对Netflix公司一系列开源产品的包装,它为Spring Boot应用提供了自配置的N ...

  4. maple minimax函数

    numapprox[minimax] - minimax rational approximation Calling Sequence   minimax(f, x=a..b, [m, n], w, ...

  5. linode使用apt更新时停止的错误

    使用ubuntu在更新系统时候,有时候会出现这样的问题: 0% [Connecting to security.ubuntu.com (2001:67c:1560:8001::14)] 问了下客户,他 ...

  6. C#获取局域网MAC地址

    效果: 说明:获取本局域网的MAC地址(非本机的MAC地址) 代码:   /// <summary>         /// 获取网卡物理地址         /// </summa ...

  7. JS四种方法去除字符串最后的逗号

    <script> window.onload=function() { var obj = {name: "xxx", age: 30, sex: "fema ...

  8. 从零开始，跟我一起做jblog项目（二）Maven

    从零开始,跟我一起做jblog项目(一)引言 从零开始,跟我一起做jblog项目(二)Maven maven是一个项目管理工具,尤其适用于JAVA世界 在jblog的开发前期,还没有系统使用过mave ...

  9. 运用 Range 对象处理 Word 文档内容

    运用 Range 对象处理 Word 文档内容   在所有 Office 应用程序中,Microsoft Word 可能是应用最广泛的应用程序,它还经常在自定义 Office 解决方案中扮演重要的角色 ...

  10. 禁止sethc.exe运行 防止3389的sethc后门

    废话:在土司看到的一篇文章,发私信给那个哥们儿说让不让转载,结果还没回复我就在百度看到相同的文章.他自己也是转载的.这哥们儿ID迟早被ban 文章转载自:http://www.jb51.net/hac ...