标签:
之前自己用原生的js添加类名和移除类名,用起来感觉还算顺手。在使用jQuery框架添加类名和移除类名时候更是觉得“傻瓜式”使用了。前两天在封装别的模块,今天想起自己也来搞一下添加类名和移除类名,,,不动手不知道,敲起来遇到不少bug。主要还是起初考虑的不够周到,不过调试工具真是个‘宝’;
这里直接附上我的代码了:
//添加类(可以一次添加多个类名) function addClass() { var arg = Array.prototype.slice.call(arguments); var dom = arg[0]; //取得dom var className = arg.slice(1); //取得要添加的类名(数组形式) var doms =document.querySelectorAll(dom); //获取所有符合的dom成员 for (var i = 0; i < doms.length;i++) { //为了避免当第一次设置类名且以前没有类名,会出现第一个有空格的现象 if (doms[i].className) { //如果之前有类名了 addOne(doms[i]); } else { //首次添加类名 firstaddOne(doms[i]); } } function addOne(dom) { for (var j = 0; j < className.length; j++) { var itemName = dom.className; var itemNames = [].push.call([],itemName); console.log(typeof itemNames); dom.className = dom.className + ‘ ‘ + className[j]; } } function firstaddOne(dom) { for (var j = 0; j < className.length; j++) { dom.className = dom.className + className[j]; } } } //移除类 function removeClass() { var arg = Array.prototype.slice.call(arguments); var dom = arg[0]; //取得dom var className = arg.slice(1); //取得要删除的类名(数组形式) var doms = document.querySelectorAll(dom); //获取所有符合的dom成员 //遍历dom for(var i=0;i<doms.length;i++){ var getAttr = doms[i].getAttribute(‘class‘); var arr1 = getAttr.split(‘ ‘); //双重循环判断删除的类名是否与已有的类名一样 for(var j=0;j<arr1.length;j++){ for(var k=0;k<className.length;k++){ if(arr1[j]===className[k]){ arr1.splice(j,1); console.log(arr1.length); j--; break; } } } //一样--〉连同类名属性删除 if(arr1.length==0){ doms[i].removeAttribute(‘class‘); }else{ //否则删除要删除的类名 removeOne(doms[i]); } } function removeOne(dom){ for (var j = 0; j < className.length; j++) { var getAttr = doms[i].getAttribute(‘class‘); var arr1 = getAttr.split(‘ ‘); if(className[0]===arr1[0]){ dom.className = dom.className.replace(className[j], ‘‘); }else{ dom.className = dom.className.replace(‘ ‘ + className[j], ‘‘); } } } }
快乐的学习,才能快速的成长^_^
标签:
原文地址:http://www.cnblogs.com/Snow-G/p/5290057.html