原生js增加或者删除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() 方法修改它。

classList属性的方法有：

• add(value) 添加类名，如果有则不添加
• contains(value) 判断是否存在类名，返回Boolean值
• remove(value) 从列表中删除类名
• toggle(value) 切换类名：如果列表中存在则删除，否则添加

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

去除：document.getElementById("myDIV").classList.remove("mystyle");
复制代码

参考：

js增加class或者删除class 原生js删除增加修改class属性