IE與Firefox處理Attribute的幾點差異

前端開發中,經常需要動態的添加、移除或者獲取元素的Attribute。也就是說經常會用到setAttribute、removeAttribute和getAt tribute。今天要討論的是開發中遇到的幾處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中的removeA ttribute("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屬性。不知道是什么回事。


所屬標簽

無標簽

25选5玩法中奖