原生JavaScript来实现对dom元素class的操作方法

原生JavaScript来实现对dom元素class的操作方法 | 推荐

jQuery操作class的方式非常强大

写了一个利用原生js来实现对dom元素class的操作方法

1.addClass:为指定的dom元素添加样式
2.removeClass:删除指定dom元素的样式
3.toggleClass:如果存在(不存在)，就删除(添加)一个样式
4.hasClass:判断样式是否存在

下面为一toggleClass的测试例子

[html] view plain copy<style type="text/css">  div.testClass{  background-color:gray;  } </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, ' ');  } } function toggleClass(obj,cls){  if(hasClass(obj,cls)){  removeClass(obj, cls);  }else{  addClass(obj, cls);  } } function toggleClassTest(){  var obj = document. getElementById('test');  toggleClass(obj,"testClass"); } </script>

<body>  <div id = "test" style = "width:250px;height:100px;">  sssssssssssss  </div>  <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" /> </body>

以上就是小编为大家整理的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家继续支持~~

免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。