【实践】用js 实现 jq 的removeClass 方法

时间：2023-03-08 19:53:35
【实践】用js 实现 jq 的removeClass 方法

HTML 代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>js removeClass 应用</title>

    <style type="text/css">

     div{

         width: 100px;

         height: 100px;

         background-color: #000;

     }

     .test1{

         border:1px solid red;

     }

     .test2{

         border: 5px solid #ff0;

     }

     .test3{

         border: 8px solid #f00;

     }

     .test4{

         border: 10px solid #999;

     }

     .test5{

         border: 12px solid #ccc;

     }

    </style>

</head>

<body>

  <div class="test1 test2 test3 test4 test5"></div>

js代码

<script type="text/javascript">

  window.onload = function(){

    var div = document.getElementsByTagName('div')[0];

    removeClass(div,"test2");

      function removeClass(elem,classname){

             //首先进行初次判断目标元素是否存在类名

             //如果有开始执行具体操作

             //如果没有调用控制台报错

             if(elem.className != ""){

                 //先把目标元素的所有类名保存在数组中

                 //类名的存在是以空格隔开的 所以调用split()方法传入一个空格参数

                var allClassName = elem.className.split(" ");

                console.log("第一次赋值后class数量为：" + allClassName);

                var result;//完成操作后保存类名（在以后调用）

                var listClass;//保存修改过后的数组

                //1.首先遍历一次所有类名

                for (var i = 0; i < allClassName.length; i++) {

                    if(allClassName[i] == classname){

                        //如果在所有类名里面找到要删除的类名执行如下操作

                        //将对应的类名删除，调用splice方法，第一个参数是要删除元素的索引

                        //第二个参数是删除元素的个数

                        allClassName.splice(i,1);

                    }

                }

                //把 allClassName 数组赋值给 listClass 数组

                listClass = allClassName;

                //遍历listClass 数组

                for (var j = 0; j < listClass.length; j++) {

                    //把第一个数组元素赋值给 result时要直接赋值不然会出现undefined

                    //之后加上空格因为类名的存在形式就是用空格分隔的

                    if (j == 0) {

                        result = listClass[j];

                        result += " ";

                    }else{

                        //除第一个以外的元素就可以用 加法运算保存在result字符串里面

                        result += listClass[j];

                        result += " ";

                    }

                }

                console.log("处理后的listClass数量" + listClass);

                elem.className = result;//将目标元素的类名重新被 result 覆盖掉

             }else{

                 console.log("目标元素没有存在的类名")

             }

        }

  }

 </script>

相关文章