zoukankan      html  css  js  c++  java

  • 浅谈getAttribute兼容性

    最近终于证实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",
     margin  "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;

     
     
  • 相关阅读:
    使用JS获取选中的复选框的值
    AngularJS实现tab选项卡
    Java递归获取树父节点下的所有树子节点
    SQL中的case when then
    用sql语句（alter）追加新字段、外键、删除列
    javascript把number转化成百分比
    使用group by来去除重复记录
    JavaScript数组
    基本排序方法
    （转）如何学好C语言
  • 原文地址：https://www.cnblogs.com/jq-melody/p/4549305.html
Copyright © 2011-2022 走看看