封装函数
1 (function (w) { 2 w.myTool = { 3 $: function (id) { 4 return typeof id === 'string' ? document.getElementById(id) : null; 5 }, 6 hasClassName: function (obj, cs) { 7 var reg = new RegExp('\\b' + cs + '\\b'); //匹配前后已空格的类名 8 return reg.test(obj.className); 9 }, 10 addClassName: function (obj, cs) { 11 if(!this.hasClassName(obj,cs)){ 12 obj.className += ' ' + cs; //类与类之间加空格 13 } 14 }, 15 removeClassName: function (obj, cs) { 16 var reg = new RegExp('\\b' + cs + '\\b'); 17 // 删除class 18 obj.className = obj.className.replace(reg, ''); //替换为空 19 }, 20 toggleClassName: function (obj, cs) { 21 if(this.hasClassName(obj,cs)){ 22 // 有, 删除 23 this.removeClassName(obj,cs); 24 }else { 25 // 没有,则添加 26 this.addClassName(obj,cs); 27 } 28 } 29 }; 30 })(window);
window.addEventListener('load', function (ev) { myTool.$('btn').addEventListener('click', function () { // myTool.$('box').className = 'box1 box2'; // console.log(myTool.hasClassName(myTool.$('box'), 'box11')); // 添加样式类 // myTool.addClassName(myTool.$('box'), 'box2'); // 删除样式类 // myTool.removeClassName(myTool.$('box'), 'box2'); // 切换样式类 myTool.toggleClassName(myTool.$('box'), 'box2'); }); });