首頁 > 文章 > web前端 > 原生js實作addclass,removeclass,toggleclasss實例

原生js實作addclass,removeclass,toggleclasss實例

高洛峰原創: 2016-12-05 14:34:551427瀏覽

jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.

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

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

下面为一toggleClass的测试例子

<style type="text/css">
  div.testClass{
    background-color:gray;
  }
</style>
  
<script type="text/javascript">
function hasClass(obj, cls) {
  return obj.className.match(new RegExp(&#39;(\\s|^)&#39; + cls + &#39;(\\s|$)&#39;));
}
  
function addClass(obj, cls) {
  if (!this.hasClass(obj, cls)) obj.className += " " + cls;
}
  
function removeClass(obj, cls) {
  if (hasClass(obj, cls)) {
    var reg = new RegExp(&#39;(\\s|^)&#39; + cls + &#39;(\\s|$)&#39;);
    obj.className = obj.className.replace(reg, &#39; &#39;);
  }
}
  
function toggleClass(obj,cls){
  if(hasClass(obj,cls)){
    removeClass(obj, cls);
  }else{
    addClass(obj, cls);
  }
}
  
function toggleClassTest(){
  var obj = document. getElementById(&#39;test&#39;);
  toggleClass(obj,"testClass");
}
</script>
  
<body>
  <div id = "test" style = "width:250px;height:100px;">
    sssssssssssss
  </div>
  <input type = "button" value = "toggleClassTest" onclick = "toggleClassTest();" />
</body>

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：如何判斷一個js物件是否一個dom對象下一篇：如何判斷一個js物件是否一個dom對象

看更多

原生js實作addclass,removeclass,toggleclasss實例

相關文章