原生js实现addClass,removeClass,hasClass方法
本文分为两部分进行讲解，具体内容如下
第一部分：原生js实现addClass,removeClass,hasClass方法
functionhasClass(elem,cls){
cls=cls||'';
if(cls.replace(/\s/g,'').length==0)returnfalse;//当cls没有参数时，返回false
returnnewRegExp(''+cls+'').test(''+elem.className+'');
}
functionaddClass(ele,cls){
if(!hasClass(elem,cls)){
ele.className=ele.className==''?cls:ele.className+''+cls;
}
}
functionremoveClass(ele,cls){
if(hasClass(elem,cls)){
varnewClass=''+elem.className.replace(/[\t\r\n]/g,'')+'';
while(newClass.indexOf(''+cls+'')>=0){
newClass=newClass.replace(''+cls+'','');
}
elem.className=newClass.replace(/^\s+|\s+$/g,'');
}
}
第二部分：使用原生JS实现jQuery的addClass,removeClass,hasClass函数功能
functionaddClass(obj,cls){
varobj_class=obj.className,//获取class内容.
blank=(obj_class!='')?'':'';//判断获取到的class是否为空,如果不为空在前面加个'空格'.
added=obj_class+blank+cls;//组合原来的class和需要添加的class.
obj.className=added;//替换原来的class.
}
functionremoveClass(obj,cls){
varobj_class=''+obj.className+'';//获取class内容,并在首尾各加一个空格.ex)'abcbcd'->'abcbcd'
obj_class=obj_class.replace(/(\s+)/gi,''),//将多余的空字符替换成一个空格.ex)'abcbcd'->'abcbcd'
removed=obj_class.replace(''+cls+'','');//在原来的class替换掉首尾加了空格的class.ex)'abcbcd'->'bcd'
removed=removed.replace(/(^\s+)|(\s+$)/g,'');//去掉首尾空格.ex)'bcd'->'bcd'
obj.className=removed;//替换原来的class.
}
functionhasClass(obj,cls){
varobj_class=obj.className,//获取class内容.
obj_class_lst=obj_class.split(/\s+/);//通过split空字符将cls转换成数组.
x=0;
for(xinobj_class_lst){
if(obj_class_lst[x]==cls){//循环数组,判断是否包含cls
returntrue;
}
}
returnfalse;
}
以上就是本文的全部内容，希望对大家学习javascript程序设计有所帮助。