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

2019-11-19 15:46:22

字体：大中小

来源：转载

供稿：网友

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>

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

上一篇：利用JS制作万年历的方法

下一篇：React Native 集成jpush-react-native的示例代码