MasterDragon

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
====== IE瀏覽器存在的setAttribute bug ======

來源:http://www.iefans.net/ie-setattribute-bug/

IE的**setAttribute**中與標準瀏覽器的有許多不同，主要表現在IE對**setAttribute**的功能上有些限制，就是不能用**setAttribute**來設定**class**、**style**於**onclick**等事件的值以及設置**name**屬性，那這樣就會導致**setAttribute**在IE瀏覽器裡失去很多的用途！而在IE6,IE7中，如果動態生成**input**元素，是無法為其設置**name**屬性的。不過當然這bug已經在最新版的IE8中被修復，詳情可以瀏覽微軟官網給出的資料。由於**name**屬性對表單元素非常重要（在提交表單時，與**value**屬性組成鍵值對，發送到後台），因此必須留意這個bug。

微軟的相關資料：[[http://msdn.microsoft.com/en-us/library/ms534184(VS.85).aspx|NAME Attribute | name Property]]
<code javascript>
<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>
</code>

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

<code javascript>
<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>
</code>

另一個利用IE強大的**createElement**特徵，它能在創建元素的同時，連屬性也一起創建。

<code javascript>
<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>
</code>

但name只是冰山一角，**setAttribute**在設置屬性時，有許多屬性在IE下與標準瀏覽器的命名是不一樣的，看一下jQuery，發現它也是不全的。許多地雷埋在這裡，總有一個你遲早會中的。下面是一個詳盡的參照表：左邊為標準瀏覽器的，右邊是IE的。

<code jquery>
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"
}
</code>

IE不能用**setAttribute**為dom元素設置onXXX屬性，換言之，不能用**setAttribute**設置事件。

<code javascript>
<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>
</code>

IE要直接賦給一個函數！

<code javascript>
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)");
}
</code>

<code javascript>
<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>
</code>

在IE6與IE7中也不能用**setAttribute**設置樣式:dom.setAttribute("style","font-size:14px")

<code javascript>
<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>
</code>

這時要統一用dom元素的**style.csstext**屬性賦值比較安全。

<code javascript>
<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>
</code>

總結：各個瀏覽器的標準的不統一確實給我們在網站製作的過程中帶來很多的麻煩，遇到這種問題也是我們特別頭痛的事情，這時我們試著換一種思路來考慮問題，可能也會得到異曲同工之妙。最後，我個人感覺這個問題也並不能說是IE瀏覽器的問題，只能說w3c在制定標準的時候欠缺全面的考慮！畢竟很多標籤是IE瀏覽器制定的。

版權聲明：轉載時請以超鏈接形式標明文章原始出處和作者信息及本聲明\\
文章引用地址：http://www.iefans.net/ie-setattribute-bug/ 作者：iefans