1. 程式人生 > >JavaScript操作DOM元素中的class屬性

JavaScript操作DOM元素中的class屬性

在互動性較強的Web應用中,經常需要動態更改指定元素的屬性值,假設變數e是頁面中一個元素的引用,根據W3C DOM標準,可以在JavaScript中使用e.getAttribute('屬性名')來取得屬性的值,並且用e.setAttribute('屬性名', '值')來設定屬性值。網頁標籤中,class是一個常用的屬性,用於指定某一個元素遵從一個或多個自定義樣式,由於class屬於JavaScript保留值,因此當我們要操作元素的class屬性值時,直接使用e.getAttribute('class')和e.setAttribute('class', 'value')可能會遭遇瀏覽器相容性問題。

  W3C DOM標準為每個節點提供了一個可讀寫的className屬性,作為節點class屬性的對映,標準瀏覽器的都提供了這一屬性的支援,因此,可以使用e.className訪問元素的class屬性值,也可對該屬性進行重新斌值。而IE和Opera中也可使用e.getAttribute('className')和e.setAttribute('className', 'value')訪問及修改class屬性值。相比之下,e.className是W3C DOM標準,仍然是相容性最強的解決辦法。

  以下列表說明了上文提及的三種做法的瀏覽器相容性測試:

  • e.className 能在IE、Mozilla(Firefox)、Opera和Safari正確執行
  • e.getAttribute('class')和e.setAttribute('class', 'value') 能在Mozilla(Firefox)和Opera中正確執行,在IE和Safari中則不能使用。
  • e.getAttribute('className') 在IE和Opera中正確執行,在Mozilla(Firefox)和Safari中則不能使用。