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 = "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
原文地址：http://www.cnblogs.com/chancy/p/7513842.html