關於JS修改標籤的class屬性
阿新 • • 發佈：2019-01-01
近日,專案中,要用到動態的去修改td的class屬性.
由於對JS不熟悉,除錯了N久:
document.getElementById("td").class = "css_sty";
document.getElementById("td").setAttribute("calss","css_sty");
試了以上兩種方法都不行.
於是在網上拼命搜尋,終於找到問題所在:
由於class屬於JavaScript保留值，因此當我們要操作元素的class屬性值時，直接使用obj.getAttribute('class')和obj.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中則不能使用。