JavaScript Removeclass addClass 简单封装

对于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
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

对酒丶当歌

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值