判斷是否存在某一個(gè)樣式類名:hasClass
驗(yàn)證當(dāng)前元素是否包含className這個(gè)樣式類名
function hasClaa(curEle,className){
//用正則匹配,左邊可能是開頭或一加多個(gè)空格铆帽,右邊可能是結(jié)尾或一加多個(gè)空格
var reg=new RegExp("(^| +)"+className+"( +|$)");
return reg.tset(curEle.className);
}
給元素增加樣式類名:addClass
function addClass(curEle,className){
//為了防止className傳遞進(jìn)來的值包含多個(gè)樣式類名栗恩,把傳遞進(jìn)來的字符串按照一到多個(gè)空格拆分成數(shù)組中的每一項(xiàng)
var ary=className.replace(/^ +| +$/g,"").split(/ +/g); //repalce先去掉首尾多個(gè)空格后在分割
//循環(huán)數(shù)組谬晕,一項(xiàng)項(xiàng)的進(jìn)行驗(yàn)證增加即可
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傳遞進(jìn)來的值包含多個(gè)樣式類名揩悄,把傳遞進(jìn)來的字符串按照一到多個(gè)空格拆分成數(shù)組中的每一項(xiàng)
var ary=className.split(/ +/g);
//循環(huán)數(shù)組,一項(xiàng)項(xiàng)的進(jìn)行驗(yàn)證移除即可
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," ");//替換成一個(gè)空格
}
}
}