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