添加和移除Class，addClass/removeClass的简单实现

本方法是通过数组和字符串的方法实现，尚不能满足实际应用，仅供学习~~~

本方法的特点：

  • 支持无class节点的class添加
  • 支持已经具有单个或多个class的节点添加
  • 屏蔽已经具有想同className的节点添加重复的class
  • 暂时不支持一次性添加多个class
  • 移除class支持单个class的节点移除
  • 移除class支持多个class的节点移除单个class
  • 暂时不能“完美”支持一次性移除多个class

以下是源码：

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>addClass</title>
 6     <script>
 7         window.onload = function () {
 8             
 9 
10             function addClass(obj, className) {
11                 if (obj.className === '') {
12                     obj.className = className;
13                 } else {
14                     //如果要添加的class在原有的class中不存在
15                     var arrClassName = obj.className.split(' ');
16                     if (arrIndexOf(arrClassName, className) === -1) {
17                         obj.className += ' ' + className;
18                     }
19                     //如果要添加的class在原有的class中存在，则不操作
20 
21                 }
22             }
23 
24             function removeClass(obj, className) {
25                 //先判断obj是不是有className
26                 if (obj.className != '') {
27                     var arrClassName = obj.className.split(' ');
28                     var classIndex = arrIndexOf(arrClassName, className);
29                     if (classIndex!==-1) {
30                         arrClassName.splice(classIndex, 1);
31                         obj.className = arrClassName.join(' ');
32                     }
33                 }
34             }
35 
36             function arrIndexOf(arr, v) {
37                 for (var i = 0; i < arr.length; i++) {
38                     if (arr[i] == v) {
39                         return i;
40                     }
41                 }
42                 return -1;
43             }
44 
45             function outPutClassName(infoCon,info) {
46                 infoCon.innerHTML = info;
47             }
48 
49             var oDiv = document.getElementById('div1');
50             var mText = document.getElementById('text1');
51             var mBtn1 = document.getElementById('btn1');
52             var mBtn2 = document.getElementById('btn2');
53 
54             mBtn1.onclick = function() {
55                 addClass(oDiv, mText.value);
56                 outPutClassName(oDiv, oDiv.className);
57             };
58             mBtn2.onclick = function () {
59                 removeClass(oDiv, mText.value);
60                 outPutClassName(oDiv, oDiv.className);
61             };
62         }
63     </script>
64 </head>
65     <body>
66         <input id="text1" type="text" value="newClass"/><input id="btn1" value="Add class" type="button"/><input id="btn2" value="RemoveClass" type="button"/>
67         <p>目标元素的className：（暂时不支持单次添加多个className）</p>
68         <div id="div1"></div>
69     
70 
71     </body>
72 </html>

 

原创文章，转载请标明出处：http://www.eyezip.com/?p=992

 

posted @ 2014-11-28 15:46  雪红幽殇  阅读(4405)  评论(0)  编辑  收藏  举报