判断是否存在某一个样式类名:hasClass
验证当前元素是否包含className这个样式类名
function hasClaa(curEle,className){
//用正则匹配,左边可能是开头或一加多个空格,右边可能是结尾或一加多个空格
var reg=new RegExp("(^| +)"+className+"( +|$)");
return reg.tset(curEle.className);
}
给元素增加样式类名:addClass
function addClass(curEle,className){
//为了防止className传递进来的值包含多个样式类名,把传递进来的字符串按照一到多个空格拆分成数组中的每一项
var ary=className.replace(/^ +| +$/g,"").split(/ +/g); //repalce先去掉首尾多个空格后在分割
//循环数组,一项项的进行验证增加即可
for(var i=0,len=ary.length;i<len;i++){
var curName=ary[i];
//判断是否存在该类名,不存在才增加
if(!hasClass(curEle,className)){
curEle.className+=" "+className;
}
}
}
移除样式类名:removeClass
function removeClass(){
//为了防止className传递进来的值包含多个样式类名,把传递进来的字符串按照一到多个空格拆分成数组中的每一项
var ary=className.split(/ +/g);
//循环数组,一项项的进行验证移除即可
for(var i=0,len=ary.length;i<len;i++){
var curName=ary[i];
//判断是否存在该类名,不存在才移除
if(!hasClass(curEle,className)){
var reg=new RegExp("(^| +)"+curName+"( +|$)","g");//全局匹配符g
curEle.className=curEle.className.replace(reg," ");//替换成一个空格
}
}
}