原生JS实现addClass,removeClass,toggleClass

最新推荐文章于 2024-08-12 22:28:07 发布

dfcgism168171

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量74

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Minxiaotian/p/5161154.html

版权

<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>

1.addClass:为指定的dom元素添加样式

2.removeClass:删除指定dom元素的样式

3.toggleClass:如果存在(不存在)，就删除(添加)一个样式

4.hasClass:判断样式是否存在

转载于:https://www.cnblogs.com/Minxiaotian/p/5161154.html

dfcgism168171

关注

0
点赞
踩
0

收藏

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

<style type="text/css"> div.testClass{ background-color:gray; }</style><script type="text/javascript">function hasClass(obj, cls) { return obj....
复制链接

扫一扫