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");
复制代码
参考: