一些简单的Js代码的封装

 1 function getById(id) {
 2 
 3 }
 4 
 5 function getAttr(el, k) {
 6 
 7 }
 8 
 9 function setAttr(el, k, v) {
10 
11 }
12 
13 function addClass(el, k) {
14 
15 }
16 
17 function removeClass(el, k, v) {
18 
19 }
20 
21 function getStyle(el, k) {
22 
23 }
24 
25 function setStyle(el, k, v) {
26 
27 }
28 
29 function addEvent(el, type, func) {
30 
31 }
32 
33 function removerEvent(el, type, func) {
34 
35 }

　　封装的实现：

 1 function getById(id) {
 2     return id ? document.getElementById(id) : null;
 3 }
 4 
 5 function getAttr(el, k) {
 6     if (el) {
 7         return el.getAttribute[k];
 8     }
 9     return null;
10 }
11 
12 function setAttr(el, k, v) {
13     if (el) {
14         el.setAttribute(k, v);
15     }
16 }
17 
18 function addClass(el, k) {
19     if (el) {
20         var arr = el.className.split(' ');
21         var arrClass = [];
22         var isExist = false;
23         for (var i = 0, len = arr.length; i < len; i++) {
24             if (arr[i] != '') arrClass.push(arr[i]);
25             if (arr[i] == k) {
26                 isExist = true;
27                 break;
28             }
29         }
30         if (isExist == false) {
31             arrClass.push(k);
32             var cls = arrClass.join(' ');
33             el.className = cls;
34             setAttr(el, 'class', cls)
35         }
36     }
37 }
38 
39 function removeClass(el, k) {
40     if (el) {
41         var arr = el.className.split(' ');
42         var arrClass = [];
43         for (var i = 0, len = arr.length; i < len; i++) {
44             if (arr[i] != '' && arr[i] != k) arrClass.push(arr[i]);
45         }
46 
47         var cls = arrClass.join(' ');
48         el.className = cls;
49         setAttr(el, 'class', cls)
50     }
51 }

我们看到，firefox可以获取class列表，而ie几个浏览器只有className这一属性，所以操作class时候我们要用到。

但是获取当前样式却比较麻烦，还需要计算各个样式表的比重，我们这里用不到就暂时忽略了。

以上简单测试了一番，基本没有问题，我最后加上事件绑定，便暂时告一段落。

 1function addEvent(el, type, func) {
 2     if (el) {
 3         if (el.attachEvent) {
 4             el.attachEvent('on' + type, func);
 5         } else {
 6             el.addEventListener(type , func, false);
 7         }
 8     }
 9 }
10 
11 function removerEvent(el, type, func) {
12     if (el) {
13         if (el.attachEvent) {
14             el.detachEvent('on' + type, func);
15 
16         } else {
17             el.removeEventListener(type, func, false);
18         }
19     }
20 }