超有用！原生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 >