修改多CLASS的标签-CSDN博客

虽然用obj.style.className可以直接修改标签所属的类名，但是还是有限制的，比如说，这个标签有多个class的时候，就比较不适用了：

1 .pd10{padding:10px;} 2 .mg10{margin:10px;}

结构如下：

1 <div class="pd10 mg10"></div>

如果我们想把.pd10这个类删掉，用style.className就不适用了

在几次的百度之后，我找到了一种方法，就是用正则匹配，然后选出要删除或者是修改的class

1、先判断标签中是否有该类

1 function hasClass( elements,sClass){ 
2 return !!elements.className.match( new RegExp( "(\\s|^)" + sClass+ "(\\s|$)") ); // ( \\s|^ ) 判断前面是否有空格 （\\s | $ ）判断后面是否有空格 两个感叹号为转换为布尔值 以方便做判断 
3 };

2、定义添加css类函数

1 function addClass(ele,sClass){
2   if(!hasClass(ele,sClass){
3     ele.className += " " + sClass;
4   };
5 }

这里是判断是否有sClass这个类，没有，就加上，用+=，而不用=

3、定义删除CSS类函数

function removeClass(ele,sClass){
  if(hasClass(ele,sClass)){
    elements.className = elements.className.replace( new RegExp( "(\\s|^)" + sClass + "(\\s|$)","");
  };
};

用replace函数，把要删除的函数替换成空的字符串

转载于:https://www.cnblogs.com/fyima/p/3684782.html