本方法是通過數組和字符串的方法實現，尚不能滿足實際應用，僅供學習~~~
本方法的特點：
- 支持無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