封装函数

 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‘);

         });
    });