原生JS实现增加删除class
Posted 花儿为何那样红
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生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>
以上是关于原生JS实现增加删除class的主要内容，如果未能解决你的问题，请参考以下文章
原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法(