超有用！原生JS实现增加删除class（addClass,removeClass,toggleClass）

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

<! DOCTYPE  html> < html > < head > < style  type="text/css">       .night-mode{           background:#383838;           color:#888888;      }  </ style >      < script  type="text/javascript">< br  data-filtered="filtered">//判断样式是否存在 function hasClass(ele, cls) {      return ele.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)")); } //为指定的dom元素添加样式 function addClass(ele, cls) {      if (!this.hasClass(ele, cls)) ele.className += " " + cls; } //删除指定dom元素的样式 function removeClass(ele, cls) {      if (hasClass(ele, cls)) {          var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");//正则表达式，需要补血          ele.className = ele.className.replace(reg, " ");      } } //如果存在(不存在)，就删除(添加)一个样式 function toggleClass(ele,cls){       if(hasClass(ele,cls)){           removeClass(ele, cls);       }else{           addClass(ele, cls);       }  } //调用 function toggleClassTest(){       var ele = document. getElementsByTagName('body')[0];       toggleClass(ele,"night-mode");  }  </ script > </ head >     < body >       < div  style = "width:250px;height:100px;">        < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >       < p >这是一段文字 </ p >      </ div >       < input  type = "button" value = "变黑" onclick = "toggleClassTest();" />  </ body > </ html >