原生js操作dom添加刪除替換class

1.比較傳統的方法

var classVal = document.getElementById("id").getAttribute("class");

 

//刪除的話
classVal = classVal.replace("someClassName","");
document.getElementById("id").setAttribute("class",classVal );

//添加的話
classVal = classVal.concat(" someClassName");
document.getElementById("id").setAttribute("class",classVal );

//替換的話
classVal = classVal.replace("someClassName","otherClassName");
document.getElementById("id").setAttribute("class",classVal );

 

2.html5增加了classList

classList 屬性返回元素的類名，作為 DOMTokenList 對象。

該屬性用於在元素中添加，移除及切換 CSS 類。

classList 屬性是只讀的，但你可以使用 add() 和 remove() 方法修改它。

增加：document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

去除：document.getElementById("myDIV").classList.remove("mystyle");

替換：document.getElementById("myDIV").classList.replace("someClassName","otherClassName");