对className增删替换切换的一些操作方法

添加className

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         #div1 {
  8             width: 100px;
  9             height: 100px;
 10         }
 11         .box1 {
 12             border: 5px solid #000;
 13         }
 14         .box2 {
 15             background: red;
 16         }
 17         .box3 {
 18             border-radius: 10px;
 19             background: yellow;
 20         }
 21         .box4 {
 22             background: blue;
 23         }
 24     </style>
 25     <script>
 26         window.onload = function() {
 27 
 28             var btn1 = document.getElementById('btn1');
 29             var btn2 = document.getElementById('btn2');
 30             var div1 = document.getElementById('div1');
 31             var btn3 = document.getElementById('btn3');
 32             var btn4 = document.getElementById('btn4');
 33 
 34             btn1.onclick = function() {
 35                 addClass( div1, 'box1' );
 36             }
 37 
 38             btn2.onclick = function() {
 39                 addClass1(div1,['box1','box2']);
 40             }
 41 
 42             btn3.onclick = function() {
 43                 addClass2(div1,'box2 box3');
 44             }
 45 
 46             btn4.onclick = function() {
 47                 addClass3(div1,'box3,box4');
 48             }
 49 
 50             /*
 51             * 给元素添加指定的class
 52             * @param object obj 要添加class的元素对象
 53             * @param string classname 要添加的class
 54             * @return
 55             * */
 56             function addClass(obj, classname) {
 57 
 58                 //如果元素原来没有class，则直接添加
 59                 if ( obj.className == '' ) {
 60                     obj.className = classname;
 61                 } else {
 62                     //如果元素有class，则把class获取出来，然后通过空格拆分成数组
 63                     var classArr = obj.className.split(' ');
 64                     //判断要添加的class是否在数组存在，如果不存在则添加
 65                     if ( classArr.indexOf(classname) == -1 ) {
 66                         obj.className += ' ' + classname;
 67                     }
 68                 }
 69 
 70             }
 71 
 72 
 73             function addClass1(obj,array) {
 74                 //如果原来没有class,直接添加
 75                if (obj.className == '') {
 76                    for (var i=0;i<array.length;i++) {
 77                        obj.className += ' ' + array[i];
 78                    }
 79                } else  {
 80                    //判断要添加的class是否在数组存在，如果不存在则添加
 81                    var classArr = obj.className.split(' ');
 82                    var  i = array.length;
 83                    while (i--) {
 84                        if (classArr.indexOf(array[i]) == -1) {
 85                            obj.className += ' ' + array[i];
 86                        } else  {
 87 
 88 
 89                        }
 90                    }
 91                }
 92 
 93            }
 94 
 95             function addClass2(obj,classStr) {
 96 
 97                 //如果元素原来没有class，则直接添加
 98                 if (obj.className == '') {
 99                     var  tempArray = classStr.split(' ');
100                     for (var  i = 0;i < tempArray.length;i++) {
101                         obj.className += ' ' + tempArray[i];
102                     }
103 
104                 }
105                 else {
106                     //如果元素有class，则把class获取出来，然后通过空格拆分成数组
107                     var classArr = obj.className.split(' ');
108                     //判断要添加的class是否在数组存在，如果不存在则添加
109 
110                     var  tempArray = classStr.split(' ');
111                     var j = tempArray.length;
112                     while (j--) {
113                         if (classArr.indexOf(tempArray[j]) == -1) {
114                             obj.className += ' ' + tempArray[j];
115                         } else  {
116 
117 
118                         }
119                     }
120                 }
121             }
122 
123             function addClass3(obj,classStr) {
124 
125                 //如果元素原来没有class，则直接添加
126                 if (obj.className == '') {
127                     var  tempArray = classStr.split(',');
128                     for (var  i = 0;i < tempArray.length;i++) {
129                         obj.className += ' ' + tempArray[i];
130                     }
131 
132                 }
133                 else {
134                     //如果元素有class，则把class获取出来，然后通过空格拆分成数组
135                     var classArr = obj.className.split(' ');
136                     //判断要添加的class是否在数组存在，如果不存在则添加
137 
138                     var  tempArray = classStr.split(',');
139                     var j = tempArray.length;
140                     while (j--) {
141                         if (classArr.indexOf(tempArray[j]) == -1) {
142                             obj.className += ' ' + tempArray[j];
143                         } else  {
144 
145 
146                         }
147                     }
148                 }
149             }
150         }
151     </script>
152 
153 </head>
154 <body>
155     <button id="btn1">无颜色</button>
156     <button id="btn2">红色</button>
157     <button id="btn3">黄色</button>
158     <button id="btn4">蓝色</button>
159     <div id="div1" class=""></div>
160 </body>
161 </html>

View Code

删除className

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <style>
 7         #div1 {
 8             width: 100px;
 9             height: 100px;
10         }
11         .box1 {
12             border: 5px solid #000;
13         }
14         .box2 {
15             background: red;
16         }
17         .box3 {
18             border-radius: 10px;
19         }
20     </style>
21     <script>
22         window.onload = function() {
23 
24             var btn1 = document.getElementById('btn1');
25             var btn2 = document.getElementById('btn2');
26             var div1 = document.getElementById('div1');
27 
28             btn1.onclick = function() {
29                 addClass( div1, 'box3' );
30             }
31 
32             btn2.onclick = function() {
33                 removeClass(div1, 'box3');
34             }
35 
36             /*
37              * 给元素添加指定的class
38              * @param object obj 要添加class的元素对象
39              * @param string classname 要添加的class
40              * @return
41              * */
42             function addClass(obj, classname) {
43 
44                 //如果元素原来没有class，则直接添加
45                 if ( obj.className == '' ) {
46                     obj.className = classname;
47                 } else {
48                     //如果元素有class，则把class获取出来，然后通过空格拆分成数组
49                     var classArr = obj.className.split(' ');
50                     //判断要添加的class是否在数组存在，如果不存在则添加
51                     if ( classArr.indexOf(classname) == -1 ) {
52                         obj.className += ' ' + classname;
53                     }
54                 }
55 
56             }
57 
58             /*
59             * 删除指定元素的指定class
60             * @param Object obj 要删除class的元素
61             * @param string classname 要删除的class
62             * @return
63             * */
64             function removeClass(obj, classname) {
65                 //把原有的class获取出来拆分成数组
66                 var classArr = obj.className.split(' ');
67                 //判断要删除的className在classArr中是否存在
68                 var _index = classArr.indexOf(classname);
69                 //如果要删除的class存在
70                 if ( _index != -1 ) {
71                     classArr.splice(_index, 1);
72                     obj.className = classArr.join(' ');
73                 }
74             }
75 
76         }
77     </script>
78 
79 </head>
80 <body>
81     <button id="btn1">添加class</button>
82     <button id="btn2">删除class</button>
83     <div id="div1" class="box1 box2"></div>
84 </body>
85 </html>

View Code

替换replaceClass

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         #div1 {
  8             width: 100px;
  9             height: 100px;
 10         }
 11         .box1 {
 12             border: 5px solid #000;
 13         }
 14         .box2 {
 15             background: red;
 16         }
 17         .box3 {
 18             border-radius: 10px;
 19         }
 20     </style>
 21     <script>
 22         window.onload = function() {
 23 
 24             var btn1 = document.getElementById('btn1');
 25             var btn2 = document.getElementById('btn2');
 26             var btn3 = document.getElementById('btn3');
 27             var div1 = document.getElementById('div1');
 28 
 29             btn1.onclick = function() {
 30                 addClass( div1, 'box3' );
 31             }
 32 
 33             btn2.onclick = function() {
 34                 removeClass(div1, 'box3');
 35             }
 36 
 37             btn3.onclick = function() {
 38                 replaceClass(div1, 'box3', 'box1');
 39             }
 40 
 41             /*
 42              * 给元素添加指定的class
 43              * @param object obj 要添加class的元素对象
 44              * @param string classname 要添加的class
 45              * @return
 46              * */
 47             function addClass(obj, classname) {
 48 
 49                 //如果元素原来没有class，则直接添加
 50                 if ( obj.className == '' ) {
 51                     obj.className = classname;
 52                 } else {
 53                     //如果元素有class，则把class获取出来，然后通过空格拆分成数组
 54                     var classArr = obj.className.split(' ');
 55                     //判断要添加的class是否在数组存在，如果不存在则添加
 56                     if ( classArr.indexOf(classname) == -1 ) {
 57                         obj.className += ' ' + classname;
 58                     }
 59                 }
 60 
 61             }
 62 
 63             /*
 64             * 删除指定元素的指定class
 65             * @param Object obj 要删除class的元素
 66             * @param string classname 要删除的class
 67             * @return
 68             * */
 69             function removeClass(obj, classname) {
 70                 //把原有的class获取出来拆分成数组
 71                 var classArr = obj.className.split(' ');
 72                 //判断要删除的className在classArr中是否存在
 73                 var _index = classArr.indexOf(classname);
 74                 //如果要删除的class存在
 75                 if ( _index != -1 ) {
 76                     classArr.splice(_index, 1);
 77                     obj.className = classArr.join(' ');
 78                 }
 79             }
 80 
 81             /*
 82             * 替换指定元素的指定class
 83             * @param Object obj 要操作的元素对象
 84             * @param string newClassName 新增的class
 85             * @param string oldClassName 原有要被替换的class
 86             * @return
 87             * */
 88             function replaceClass(obj, newClassName, oldClassName) {
 89                 removeClass(obj, oldClassName);
 90                 addClass(obj, newClassName);
 91 
 92 //                var classArr = obj.className.split(' ');
 93 //                for (var i=0; i<classArr.length; i++) {
 94 //                    if ( classArr[i] == oldClassName ) {
 95 //                        classArr[i] = newClassName;
 96 //                    }
 97 //                }
 98 //                obj.className = classArr.join(' ');
 99             }
100         }
101     </script>
102 
103 </head>
104 <body>
105     <button id="btn1">添加class</button>
106     <button id="btn2">删除class</button>
107     <button id="btn3">替换class</button>
108     <div id="div1" class="box1 box2"></div>
109 </body>
110 </html>

View Code

切换toggleClass

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style>
  7         #div1 {
  8             width: 100px;
  9             height: 100px;
 10         }
 11         .box1 {
 12             border: 5px solid #000;
 13         }
 14         .box2 {
 15             background: red;
 16         }
 17         .box3 {
 18             border-radius: 10px;
 19             background: yellow;
 20         }
 21         .box4 {
 22             background: blue;
 23         }
 24     </style>
 25     <script>
 26         window.onload = function() {
 27 
 28             var btn1 = document.getElementById('btn1');
 29             var btn2 = document.getElementById('btn2');
 30             var div1 = document.getElementById('div1');
 31             var btn3 = document.getElementById('btn3');
 32             var btn4 = document.getElementById('btn4');
 33 
 34             btn1.onclick = function() {
 35                 addClass( div1, 'box1' );
 36             }
 37 
 38             btn2.onclick = function() {
 39                 addClass1(div1,['box1','box2']);
 40             }
 41 
 42             btn3.onclick = function() {
 43                 addClass2(div1,'box2 box3');
 44             }
 45 
 46             btn4.onclick = function() {
 47                 addClass3(div1,'box3,box4');
 48             }
 49 
 50             /*
 51             * 给元素添加指定的class
 52             * @param object obj 要添加class的元素对象
 53             * @param string classname 要添加的class
 54             * @return
 55             * */
 56             function addClass(obj, classname) {
 57 
 58                 //如果元素原来没有class，则直接添加
 59                 if ( obj.className == '' ) {
 60                     obj.className = classname;
 61                 } else {
 62                     //如果元素有class，则把class获取出来，然后通过空格拆分成数组
 63                     var classArr = obj.className.split(' ');
 64                     //判断要添加的class是否在数组存在，如果不存在则添加
 65                     if ( classArr.indexOf(classname) == -1 ) {
 66                         obj.className += ' ' + classname;
 67                     }
 68                 }
 69 
 70             }
 71 
 72 
 73             function addClass1(obj,array) {
 74                 //如果原来没有class,直接添加
 75                if (obj.className == '') {
 76                    for (var i=0;i<array.length;i++) {
 77                        obj.className += ' ' + array[i];
 78                    }
 79                } else  {
 80                    //判断要添加的class是否在数组存在，如果不存在则添加
 81                    var classArr = obj.className.split(' ');
 82                    var  i = array.length;
 83                    while (i--) {
 84                        if (classArr.indexOf(array[i]) == -1) {
 85                            obj.className += ' ' + array[i];
 86                        } else  {
 87 
 88 
 89                        }
 90                    }
 91                }
 92 
 93            }
 94 
 95             function addClass2(obj,classStr) {
 96 
 97                 //如果元素原来没有class，则直接添加
 98                 if (obj.className == '') {
 99                     var  tempArray = classStr.split(' ');
100                     for (var  i = 0;i < tempArray.length;i++) {
101                         obj.className += ' ' + tempArray[i];
102                     }
103 
104                 }
105                 else {
106                     //如果元素有class，则把class获取出来，然后通过空格拆分成数组
107                     var classArr = obj.className.split(' ');
108                     //判断要添加的class是否在数组存在，如果不存在则添加
109 
110                     var  tempArray = classStr.split(' ');
111                     var j = tempArray.length;
112                     while (j--) {
113                         if (classArr.indexOf(tempArray[j]) == -1) {
114                             obj.className += ' ' + tempArray[j];
115                         } else  {
116 
117 
118                         }
119                     }
120                 }
121             }
122 
123             function addClass3(obj,classStr) {
124 
125                 //如果元素原来没有class，则直接添加
126                 if (obj.className == '') {
127                     var  tempArray = classStr.split(',');
128                     for (var  i = 0;i < tempArray.length;i++) {
129                         obj.className += ' ' + tempArray[i];
130                     }
131 
132                 }
133                 else {
134                     //如果元素有class，则把class获取出来，然后通过空格拆分成数组
135                     var classArr = obj.className.split(' ');
136                     //判断要添加的class是否在数组存在，如果不存在则添加
137 
138                     var  tempArray = classStr.split(',');
139                     var j = tempArray.length;
140                     while (j--) {
141                         if (classArr.indexOf(tempArray[j]) == -1) {
142                             obj.className += ' ' + tempArray[j];
143                         } else  {
144 
145 
146                         }
147                     }
148                 }
149             }
150         }
151     </script>
152 
153 </head>
154 <body>
155     <button id="btn1">无颜色</button>
156     <button id="btn2">红色</button>
157     <button id="btn3">黄色</button>
158     <button id="btn4">蓝色</button>
159     <div id="div1" class=""></div>
160 </body>
161 </html>

View Code

posted @ 2016-05-06 00:25 待繁华落尽阅读(499) 评论(0) 编辑收藏举报

刷新页面返回顶部

╭ 儛動嘚靈魂

一张网页，要经历怎样的过程，才能抵达用户面前？一位新人，要经历怎样的成长，才能站在技术之颠？

对className增删替换切换的一些操作方法

公告

╭ 儛動嘚靈魂

一张网页，要经历怎样的过程，才能抵达用户面前？ 一位新人，要经历怎样的成长，才能站在技术之颠？

对className增删替换切换的一些操作方法

公告

一张网页，要经历怎样的过程，才能抵达用户面前？一位新人，要经历怎样的成长，才能站在技术之颠？