原生JS实现增加删除class 

 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>
posted @ 2017-09-13 10:58  花儿为何那样红  阅读(1935)  评论(0)  编辑  收藏  举报