原生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程序设计有所帮助。