JavaScript Removeclass addClass 简单封装

来源:互联网 发布:unity3d 四元数 编辑:程序博客网 时间:2024/05/18 08:48

对于JavaScript增删改查对于学习编程后期也是很重要的,

我相信刚刚上手js的,都对于js的数组,字符串方法使用都不够灵活,

特别是for循环的双重嵌套,这一方面我承认我自己也是弱项,

发现上网查嵌套都很少资料 ..所以只能靠自己硬生生写下..

这是我对添加和删除类名简单的做一个封装..

<div id="box" class="warp on"></div>

     <script>
         /*   提示:
            1.初始值没有className的时候,拼接不能有空格 ;
            2.出现的className不能有重名;
            3.比较,有重复的除掉
         */


         /*
         1.获取初始值className;
         2.变量获取:将初始值进行切割;
         3.变量获取输入值进行切割;
         4.合并初始值和输入值 ;
         5.进行查重  遍历合并值
         6.倒遍历查重去(不会改变顺序)
         */




 调用格式:("类名,ID名,"添加/删除"");



        function className(Elements,Cname) {
           var  Elemens=document.querySelector(Elements),
                arr=Elemens.className.split(" "), //将原有的初始className 进行切割
                arr1=Cname.split(" "),     //将输入的className切割
                arr2=arr1.concat(arr);       //合并;
            for(var i=0; i<arr2.length; i++)
            {
                for (var j=arr2.length-1; j>i; j--) {   //倒遍历
                    if (arr2[i] == arr2[j])     //如果arr2里面有跟输入的值相同
                    {
                        arr2.splice(j,1);      //删除
                    }
                }
            }
            Elemens.className=arr2.join(" ");    //将排除的值赋予拼接输出;
        }


       function removeClass(Elements,Cname) {
           var Elemens=document.querySelector(Elements),
               arr=Elemens.className.split(" ");
               arr1=Cname.split(" ");


           for (var i=0; i<arr1.length; i++)
           {
               for (var j=0; j<arr.length; j++)
               {
                   if (arr1[i]==arr[j])
                   {
                       arr.splice(j,1);
                   }
               }
           }
                Elemens.className=arr.join(" ");
       }


0 0
原创粉丝点击