class属性的添加删除

一：通过getAttribute

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 );复制代码

二：通过classList

为 <div> 元素添加 class:document.getElementById("myDIV").classList.add("mystyle"); 为 <div> 元素添加多个类:document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass"); 为 <div> 元素移除一个类:document.getElementById("myDIV").classList.remove("mystyle"); 为 <div> 元素移除多个类:document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass"); 检查是否含有某个CSS类myDiv.classList.contains('myCssClass'); //return true or false复制代码

三：通过className

function hasClass(ele, cls) {    return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));}//为指定的dom元素添加样式function addClass(ele, cls) {    if (!this.hasClass(ele, cls)) ele.className += " " + cls;}//删除指定dom元素的样式function removeClass(ele, cls) {    if (hasClass(ele, cls)) {        var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");//正则表达式，需要补血        ele.className = ele.className.replace(reg, " ");    }}复制代码

转载于:https://juejin.im/post/5b6f0da4518825614f004faf