淺談getAttribute兼容性

最近終於證明tag.setAttribute("style", "color:#000;");在IE7中不起做用。因而百度了一些解決辦法。javascript

IE的setAttribute中與標準瀏覽器的有許多不一樣，主要表如今IE對setAttribute的功能上有些限制，就是不能用setAttribute來設定class、style於onclick等事件的值以及設置name屬性，那這樣就會致使setAttribute在IE瀏覽器裏失去不少的用途！而在IE6,IE7中，若是動態生成input元素，是沒法爲其設置name屬性的。不過固然這bug已經在最新版的IE8中被修復，詳情能夠瀏覽微軟官網給出的資料。因爲name屬性對錶單元素很是重要（在提交表單時，與value屬性組成鍵值對，發送到後臺），所以必須留意這個bug。css

微軟的相關資料：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>html

</head>
<body>
<h3>請在IE6與IE7下瀏覽，固然IE8也能夠，我已讓IE8處在IE7的兼容模式下運做。兼容模式連bugs也兼容了……</h3>
</body>
</html>java

解決辦法有兩個，如用innerHTML，以爲innerHTML真是一個偉大的發明，連火狐與W3C那幫死對頭也不得不屈服。瀏覽器

</head>
<body>
<h3>請在IE6與IE7下瀏覽</h3>
</body>
</html>app

另外一個利用IE強大的createElement特徵，它能在建立元素的同時，連屬性也一塊兒建立。dom

<!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>ui

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

在IE八、Chrome、火狐、Opera10中都能設置成功；可是在IE7下沒法設置。

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

只有IE7能設置成功，可是其餘瀏覽器均沒法設置。

兼容方法：

使用 object.className="content"

style和cssText兼容方法：

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

在IE八、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;

參考： http://www.iefans.net/ie-setattribute-bug/