提醒：本文最後更新於 3782 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

前端開發中，經常需要動態的新增、移除或者獲取元素的Attribute。也就是說經常會用到setAttribute、removeAttribute和getAttribute。今天要討論的是開發中遇到的幾處IE與Firefox對Attribute操作的差異。

屬性名大小寫

在Firefox中，屬性沒有小寫的概念，就算屬性名全用大寫，Firefox也會解析成小寫，用Firebug看就能看到。所以下面的程式碼在Firefox與IE中執行結果會不一樣。

<div altStr="sss"></div>
 

<script type="text/javascript">
 var div = document.getElementsByTagName("div")[0];
 div.removeAttribute("altstr");
 alert(div.getAttribute("altstr"));//IE中返回sss,FF中返回null
</script>

不過在IE中，removeAttribute有第二個引數，設定為true表示不忽略大小寫，為false時忽略大小寫，預設值是true；Firefox中因為解析時就不存在大寫屬性了，所以就沒有第二個引數。也就是說IE中removeAttribute(”test”,false)等同於Firefox中的removeAttribute(”test”)，IE中removeAttribute(”test”,true)在Firefox中無法實現。

Button的value屬性

假設有下面一個button，怎麼可以得到button的value屬性？

<button value="a">b</button>

其實上，在IE下，無論是btn.getAttribute(”value”)、btn.value、btn.innerHTML還是btn.innerText都得”b”，但是在Firefox下，btn.getAttribute(”value”)、btn.value得到的都是”a”，btn.innerHTML得到的是”b”。也就是說我們如果要在button上加自定義屬性，不要用”value”做屬性名，否則在IE下沒辦法取到值。

getAttribute返回值型別不同

看一下下面的程式碼，你認為IE與Firefox分別會返回什麼？

<button onclick="alert(0)">b</button>
<script type="text/javascript">
 var btn = document.getElementsByTagName("button")[0];
 alert(btn.getAttribute("onclick"));
</script>

IE下，getAttribute(”onclick”)返回的是一個function，直接可以呼叫，Firefox下則返回一個string，直接呼叫會出錯。

題外話

今天翻手冊，看到上面對Button標籤是這麼描述的：

當 BUTTON 元素在表單中提交的話，Microsoft^® Internet Explorer 5 及以後版本將提交 VALUE 標籤屬性，若存在的話。否則就提交 innerText 屬性。在 Internet Explorer 4.0 中，只會提交 innerText 值。

但是我發現我的IE8對於form中的button，無論有沒有value屬性，都是提交button的innerHTML屬性。不知道是什麼回事。

--EOF--

提醒：本文最後更新於 3782 天前，文中所描述的資訊可能已發生改變，請謹慎使用。