jquery的写法
$(obj).hasClass(‘on‘) $(obj).addClass(‘on‘) $(obj).removeClass(‘on‘)
js 仿写
function hasClass(ele,cls){ cls =cls || ‘‘; if(cls.replace(/\s/g,‘‘).length==0){ return false; }else{ // 匹配类名 前后各加一个空字符串 为了保证匹配的是单个类名 不是包含该字符串的别的类名 例如:test test_1 return new RegExp(‘ ‘+cls+‘ ‘).test(‘ ‘+ele.className+‘ ‘) } } function addClass(ele,cls){ if(!hasClass(ele, cls)){ // 在类名字符串上叠加新类名 ele.className += ‘ ‘ + cls; } } function removeClass(ele,cls){ if(hasClass(ele,cls)){ // 获取本身的类名字符串 前后添加一个空字符串 为了匹配首个类名 就是需要移除的类名 var newClass=‘ ‘+ele.className.replace(/[\t\r\n]/g,‘‘)+‘ ‘ // 多个class的时候 需要遍历 正常情况不会有同一个类名 多次添加 所以进行while while(newClass.indexOf(‘ ‘+cls+‘ ‘) >-1){ // 匹配类名 前后各加一个空字符串 为了保证匹配的是单个类名 不是包含该字符串的别的类名 例如:test test_1 newClass = newClass.replace(‘ ‘+cls+‘ ‘, ‘ ‘);//将目标类名 替换为空 } // 讲前后的空字符串 以及替换成功以后 多出来的空字符串 匹配掉 ele.className = newClass.replace(/^\s+|\s+$/g, ‘‘); } } console.log(hasClass(document.getElementById(‘test‘),‘test‘)) removeClass(document.getElementById(‘test‘),‘test‘)
主要是思考的探索
js 实现jquery的hacClass,addClass,removeClass
原文:https://www.cnblogs.com/GoTing/p/14822582.html