js移除和添加class样式类简单介绍
分类:实例代码
本章节分享一段代码实例,它实现了利用原生javascript删除或者添加指定样式类的功能。
代码实例如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.pipipi.net/" /> <title>前端教程网</title> </head> <style type="text/css"> #antzone{ width:200px; height:100px; background:#ccc; text-align:center; line-height:100px; } .color{ color:red; } </style> <script type="text/javascript"> function hasClass(obj, cls) { return obj.className.match(new RegExp('(\s|^)' + cls + '(\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\s|^)' + cls + '(\s|$)'); obj.className = obj.className.replace(reg, ' '); } } window.onload=function(){ var oAdd=document.getElementById("add"); var oDel=document.getElementById("del"); var odiv=document.getElementById("antzone"); oAdd.onclick=function(){ addClass(odiv,"color"); } oDel.onclick=function(){ removeClass(odiv,"color"); } } </script> <body> <div id="antzone">前端教程网</div> <input type="button" id="add" value="添加"/> <input type="button" id="del" value="删除"/> </body> </html>
上面的代码实现了添加和删除功能,更多内容可以参阅相关阅读。
相关阅读:
(1).className可以参阅js className一章节。
(2).match()可以参阅正则表达式match()函数一章节。
(3).replace()可以参阅正则表达式replace()函数一章节。
js移除和添加class样式类简单介绍,这样的场景在实际项目中还是用的比较多的,关于js移除和添加class样式类简单介绍就介绍到这了。
js移除和添加class样式类简单介绍属于前端实例代码,有关更多实例代码大家可以查看。