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 var reg = 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 = "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>