原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法

最新推荐文章于 2022-07-21 10:08:34 发布

花开丶漫山红

最新推荐文章于 2022-07-21 10:08:34 发布

阅读量6.2k

点赞数 7

分类专栏： Jquery 文章标签： jquery

Jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>addclass,removeclass,hasclass,toggleclass,getbyclass</title>
</head>
<body>
<div class="div1" id="box1"></div>
<input type="button" value="按钮" id="btn1"/>
<script>
    function addClass(obj,cls) {//obj:要添加classname的元素，cls:要添加的classname;
        //如果原来没有class：
        if(obj.className == ''){
            obj.className = cls;
        } else {
            //本来已经有class，新增class的情况：
            var arrclassname = obj.className.split(' ');//
            var index = arrIndexOf(arrclassname,cls);
            if(index == -1) {
                //如果要添加的class在原来的元素上不存在：
                obj.className += ' ' + cls;
            }
        }
    }
 
    function arrIndexOf(arr,v){//检测数组中是否有相同的值存在，并且返回它的位置；
        for(var i=0;i<arr.length;i++){
            if(arr[i] == v){
                return i;
            }
        }
        return -1;
    }
 
    function removeClass(obj,cls){
        //如果有class的话：
        if(obj.className != ''){
            var arrClassName = obj.className.split(' ');//对原有class进行拆分，看看是否包含需要移除的class，也就是传参cls的classname；
            var index = arrIndexOf(arrClassName,cls);
            //r如果有需要移除的class
            if(index != -1){
                arrClassName.splice(index,1);
                obj.className = arrClassName.join('');
            }
        }
    }
 
    function hasClass(obj,cls){
        var cls = cls || '';
        if( cls.replace(/\s/g,'').length == 0){
            return false;//当cls没有参数时,返回false;
        }else{
            return new RegExp(' ' + cls + '').test(' ' + obj.className);
        }
    }
 
    function toggleClass(obj,cls){
        hasClass(obj,cls) ? removeClass(obj,cls) : addClass(obj,cls);
    }
 
    function getByClass(oParent, sClass) {
        if (oParent.getElementsByClassName) {
            return oParent.getElementsByClassName(sClass);
        } else {  //IE 8 7 6
            var arr = [];
            var reg = new RegExp('\\b' + sClass + '\\b');
            var aEle = oParent.getElementsByTagName('*');
            for (var i = 0; i < aEle.length; i++) {
                if (reg.test(aEle[i].className)) {
                    arr.push(aEle[i]);
                }
            }
            return arr;
        }
    }
 
    var oBtn1 = document.getElementById('btn1');
    var oBox1 = document.getElementById('box1');
    oBtn1.onclick = function () {
        if( hasClass(oBox1,'div1') ){
            alert('hasclass');
        };
 
        alert( getByClass(document,'div1').length );
    }
 
</script>
 
</body>
</html>

花开丶漫山红

关注

7
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
原生js实现增加（addclass）,删除（removeclass）,判断是否存在（hasclass）,如果存在删除，如果不存在添加（toggleclass）和获取类名（getbyclass）的方法

Jquery class
复制链接

扫一扫

专栏目录