添加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 >无颜色</button> 156 <button >红色</button> 157 <button >黄色</button> 158 <button >蓝色</button> 159 <div ></div> 160 </body> 161 </html>