原生JS实现addClass,removeClass,toggleClass

最新推荐文章于 2024-07-30 10:56:44 发布

dfl2099

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量99

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/qianjilou/p/7306504.html

版权

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('(\\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>

转载于:https://www.cnblogs.com/qianjilou/p/7306504.html

dfl2099

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现addClass,removeClass,toggleClass

jQuery操作class的方式非常强大，但是目前还有一些人不知道如何使用或者由于项目统一性的原因无法使用jquery.在此写了一个利用原生js来实现对dom元素class的操作方法1.addClass:为指定的dom元素添加样式2.removeClass:删除指定dom元素的样式3.toggleClass:如果存在(不存在)，就删除(添加)一个样式4.hasClas...
复制链接

扫一扫