原生JS實現增加刪除class
阿新 • • 發佈：2017-09-13
doctype [0 cls hasclass sna pla class ctype reg
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style type="text/css"> 5 .night-mode{ 6 background:#383838; 7 color:#888888; 8 } 9 </style> 10 11 <script type="text/javascript"><br>//判斷樣式是否存在 12 function hasClass(ele, cls) {13 return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); 14 } 15 //為指定的dom元素添加樣式 16 function addClass(ele, cls) { 17 if (!this.hasClass(ele, cls)) ele.className += " " + cls; 18 } 19 //刪除指定dom元素的樣式 20 function removeClass(ele, cls) { 21 if (hasClass(ele, cls)) { 22 varreg = new RegExp("(\\s|^)" + cls + "(\\s|$)"); 23 ele.className = ele.className.replace(reg, " "); 24 } 25 } 26 //如果存在(不存在)，就刪除(添加)一個樣式 27 function toggleClass(ele,cls){ 28 if(hasClass(ele,cls)){ 29 removeClass(ele, cls); 30 }else{ 31 addClass(ele, cls);32 } 33 } 34 //調用 35 function toggleClassTest(){ 36 var ele = document. getElementsByTagName(‘body‘)[0]; 37 toggleClass(ele,"night-mode"); 38 } 39 </script> 40 </head> 41 42 <body> 43 <div style = "width:250px;height:100px;"> 44 <p>這是一段文字 </p> 45 <p>這是一段文字 </p> 46 <p>這是一段文字 </p> 47 <p>這是一段文字 </p> 48 <p>這是一段文字 </p> 49 <p>這是一段文字 </p> 50 <p>這是一段文字 </p> 51 <p>這是一段文字 </p> 52 <p>這是一段文字 </p> 53 <p>這是一段文字 </p> 54 <p>這是一段文字 </p> 55 <p>這是一段文字 </p> 56 <p>這是一段文字 </p> 57 <p>這是一段文字 </p> 58 <p>這是一段文字 </p> 59 </div> 60 <input type = "button" value = "變黑" onclick = "toggleClassTest();" /> 61 </body> 62 </html>
原生JS實現增加刪除class