最近终于证实tag.setAttribute("style", "color:#000;");在IE7中不起作用。于是百度了一些解决办法。

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"){  //IE
          //use the .cssText hack
          h3.style.cssText = styleData;
        } else {
          //use the correct DOM Method
          h3.setAttribute('style', styleData);
        }
      }
    </script>
  </head>
  <body>
    <h3>h3.style.setAttribute('cssText', styleData);</h3>
  </body>
</html>
 
问题：+"\v1"为何能判断是否为IE？
答案：
　　其实就是利用各浏览器对转义字符"\v"的理解
　　在ie浏览器中，"\v"没有转义，得到的结果为"v"
　　而在其他浏览器中"\v"表示一个垂直制表符（一定程度上相当于空格）
　　所以ie解析的"\v1" 为 "v1"
　　而其他浏览器解析到 "\v1" 为 "1"
　　在前面加上一个"+"是为了把后面的字符串转变成数字
　　由于ie认为"\v1"为"v1"，所以前面的加上加号无法转变成数字，为NaN
　　其他浏览器均能变成 1
　　再因为js与c语言类似，进行逻辑判断时可使用数字，并且 0 为 false，其他数字则为true
　　所以 !1 = false ，于是其他浏览器均返回false
　　js在遇到如下几个值会返回false：undefined、null、NaN，所以ie中 !NaN = true
 
总结：

class和className兼容方法：

object.setAttribute("class","content")

在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。

object.setAttribute("className","content")

只有IE7能设置成功，但是其他浏览器均无法设置。

兼容方法：

使用 object.className="content"

style和cssText兼容方法：

object.setAttribute("style","position:absolute;left:10px;top:10px;")

在IE8、Chrome、火狐、Opera10中都能设置成功；但是在IE7下无法设置。

object.setAttribute("cssText","position:absolute;left:10px;top:10px;")

此设置方法，所有浏览器均不支持。

兼容方法：

使用 object.style.cssText="position:absolute;left:10px;top:10px;"

或者单独 object.style.各个属性 ，逐一进行设置。

Firefox和IE的JS兼容性：设置元素style熟悉

在IE下setAttribute设置元素的对象、集合和事件属性都只当成普通属性，起不到原有的作用，但可以直接进行赋值操作，如下：

var cssText = ”font-weight:bold;color:red;”
 //下面写法用于firefox类型浏览器
element.setAttribute(“style”,cssText);

//下面写法用于IE类型浏览器
element.style.cssText = cssText;

 
 

浅谈getAttribute兼容性的更多相关文章

  1. 浅谈WebService的版本兼容性设计

    在现在大型的项目或者软件开发中,一般都会有很多种终端, PC端比如Winform.WebForm,移动端,比如各种Native客户端(iOS, Android, WP),Html5等,我们要满足以上所 ...

  2. [原创]浅谈移动互联网App兼容性测试

    [原创]浅谈移动互联网App兼容性测试 今天要谈的话题,估计各位测试都有感受,移动互联网App兼容性测试,我们到底测试覆盖如何去挑选机型?具体移动App兼容性测试如何开展?是不是应引进像testin这 ...

  3. 浅谈HTML5单页面架构（一）——requirejs + angular + angular-route

    心血来潮,打算结合实际开发的经验,浅谈一下HTML5单页面App或网页的架构. 众所周知,现在移动Webapp越来越多,例如天猫.京东.国美这些都是很好的例子.而在Webapp中,又要数单页面架构体验 ...

  4. 浅谈HTML5单页面架构（二）——backbone + requirejs + zepto + underscore

    本文转载自:http://www.cnblogs.com/kenkofox/p/4648472.html 上一篇<浅谈HTML5单页面架构(一)--requirejs + angular + a ...

  5. 浅谈Linux中的信号处理机制（二）

    首先谢谢 @小尧弟 这位朋友对我昨天夜里写的一篇<浅谈Linux中的信号处理机制(一)>的指正,之前的题目我用的“浅析”一词,给人一种要剖析内核的感觉.本人自知功力不够,尚且不能对着Lin ...

  6. 浅谈JS之AJAX

    0x00:什么是Ajax? Ajax是Asynchronous Javascript And Xml 的缩写(异步javascript及xml),Ajax是使用javascript在浏览器后台操作HT ...

  7. jsp内置对象浅谈

    jsp内置对象浅谈 | 浏览:1184 | 更新:2013-12-11 16:01 JSP内置对象:我们在使用JSP进行页面编程时可以直接使用而不需自己创建的一些Web容器已为用户创建好的JSP内置对 ...

  8. JqueryEasyUI浅谈本地化应用

    JqueryEasyUI浅谈本地化应用 Jquery是对javascript一种封装,使我们开发人员使用起来更加方便,同时也解决了不同浏览器中javascript的兼容性.JqueryEasyUi是基 ...

  9. 浅谈html5网页内嵌视频

    更好的阅读体验:浅谈html5网页内嵌视频 如今在这个特殊的时代下:flash将死未死,微软和IE的历史问题,html5标准未定,苹果和谷歌的闭源和开源之争,移动互联网的大势所趋,浏览器各自为战... ...

随机推荐

  1. 第1章 SpringBoot 简介

    一.什么是Spring Boot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发 ...

  2. Java常用的集合类（转）

    继上一篇文章http://www.cnblogs.com/EasonJim/p/6937690.html中介绍的集合类有非常多,但是在实际使用中,最常用的应该是下面这几种: Java的集合框架分为Li ...

  3. mysql 密碼忘記 解決

    WINDOW 1.my.ini 加入 [mysqld] skip-grant-tables 2.mysql -uroot -p 登入 USE MYSQL: update user set passwo ...

  4. Systemtap examples, Network - 4 Monitoring TCP Packets

    http://blog.163.com/digoal@126/blog/static/16387704020131014104256627/   例子来自tcpdumplike.stp脚本, 当tcp ...

  5. TFS2018 获取所有Build变量及变量值

    添加一个Command Line 步骤,Tool设置为 cmd ,并设置参数为 /k set 注意:若在执行时出现如下报错信息,Tool的值改成 cmd.exe --20T02::.0416435Z ...

  6. SpringCloud中Rabbitmq的使用

    1.pom配置,添加以来jar包 <dependency> <groupId>org.springframework.cloud</groupId> <art ...

  7. PS 如何使用液化工具给人物减肥

    进入"液化", 有个收缩按钮, 可以选择范围大小, 想瘦哪里, 瘦多少都OK   最终效果图     1.打开原图,进入通道面板,选择菜单图像计算,计算红色通道,保留人物见图.   ...

  8. SolidEdge如何绘制阵列之后取消掉某一些

    在最后一步点击"抑制事件",然后可以在被阵列的圆形上单击,被抑制的圆形变成灰色                    

  9. evaluate-reverse-polish-notation——栈

    Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are+,-,*, ...

  10. Android开发的环境搭建及HelloWorld的实现

    安装JDK和配置Java开发环境 http://www.oracle.com/technetwork/java/javase/downloads/java-se-jdk-7-download-4321 ...