removeClass addClass解析

最新推荐文章于 2022-10-21 00:20:48 发布

维克多噗噗

最新推荐文章于 2022-10-21 00:20:48 发布

阅读量502

点赞数

分类专栏：知识点

知识点专栏收录该内容

52 篇文章 0 订阅

订阅专栏

removeClass方法

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
    </head>
<body>
<div id="box" class="a b c"></div>
<script type="text/javascript">
    var boxDom = document.querySelector("#box");
    removeClass(boxDom,"c");
    function removeClass(dom,param){
        //["a","b","c"]
        var arr = dom.className.split(" ");
        // 第一种
        // for(var i=0;i<arr.length;i++){
        //     if(arr[i] == param){
        //         arr.splice(i,1);
        //     }
        // };
        //
        // 第二种
        if(arr.indexOf(param) != -1){
            arr.splice(arr.indexOf(param),1);
        }
        dom.className = arr.join(" "); //class = "a c"
    }
</script>
</body>
</html>

addClass

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="Author" content="">
        <meta name="Keywords" content="">
        <meta name="Description" content="">
        <title>Document</title>
        <style type="text/css">
            * {margin: 0; padding: 0;}
            a {text-decoration: none;}
            ul,li {list-style: none;}
            body {font-family: "Microsoft yahei";}
        </style>
    </head>
<body>
<div id="box" class="a b weike "></div>
<script type="text/javascript">
    var boxDom = document.querySelector("#box");
    addClass(boxDom,"a b a b c a d dsd");
    function addClass(dom,param){
        var className = dom.className;
        if(className == ""){  //如果没有类名
            dom.className = param;
        }else{
            // 先全部添加 ==> 再去重;
            dom.className += " "+param;
            var allClassName = dom.className.split(" ");
            // console.log(allClassName);
            // 去重
            // 第一种
            for(var i=0;i<allClassName.length;i++){
                for(var j=allClassName.length;j>0;j--){
                    if(allClassName[i] == allClassName[j] && i!=j){
                        allClassName.splice(j,1);  //删后面的
                    }
                }
                if(allClassName[i] == ""){
                    allClassName.splice(i,1);
                }
            };
            // 第二种;
            // var arr = [];
            // for(var i=0;i<allClassName.length;i++){
            //     if(arr.indexOf(allClassName[i]) == -1){
            //         arr.push(allClassName[i]);
            //     }
            // }
            // // 第三种
            // allClassName = allClassName.filter(function(value,index,arr){
            //     return arr.indexOf(value) == index;
            // })
            console.log(allClassName.length);
            dom.className = allClassName.join(" ");
        };
    }
</script>
</body>
</html>