本方法是通过数组和字符串的方法实现，尚不能满足实际应用，仅供学习~~~
本方法的特点：
- 支持无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
时间： 2024-08-29 11:29:32