JS原生addClass、removeClass实现

最新推荐文章于 2022-05-16 21:24:32 发布

dreamliu666

最新推荐文章于 2022-05-16 21:24:32 发布

阅读量2.5k

点赞数 1

分类专栏： JavaScript 新手入门文章标签： javascript addClass removClass

本文链接：https://blog.csdn.net/qq_36356142/article/details/52903854

版权

JavaScript 同时被 2 个专栏收录

10 篇文章

订阅专栏

新手入门

8 篇文章

订阅专栏

本文介绍了两种使用原生JavaScript来实现元素的Class添加与移除的方法。第一种方法利用了自定义函数配合replace()实现，第二种则完全依赖基础JavaScript语法完成。文章提供了详细的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用jQuery的addClass（）、removeClass（）时手痒，想了解下原生JavaScript是怎么实现的这类功能。
方法一：还是用到了其他函数辅助，所以看着简短些。

function addClass(ele,addname){
        if(!ele.className){
            // class非空的时候,再判断要添加的类目是不是已经存在
            ele.className = addname;
            //class名为空的时候,直接赋值           
        }else{
            //非空
            if(!isHasClassName(addname,ele.className.split(" "))){
                //不存在要添加的class名
                ele.className += " " + addname;
            }

        }
        function isHasClassName(target,arr){
            for(var i in arr){
                if(target === arr[i]){
                    return true;
                }
            }
        } 
    }
function removeClass(ele,classname){
         ele.className = ele.className.replace(classname,"");
    }

思路:采用replace()的替换功能实现删除.
关于replace()详细参见http://www.w3school.com.cn/jsref/jsref_replace.asp

方法二:利用基础JavaScript,不采用其他函数实现

    //为元素添加新classname
    function addClassName(ele,classname){
     //判断以前是否为有class
        if(!ele.className){
            ele.className = classname;
        }else{
            newclassname = ele.className;
            newclassname += " ";
            newclassname += classname;
            ele.className = newclassname;
        }
    }
    //原生JavaScript不使用其他内部封装好的函数比较难以实现删除class,以下方法不适用于直接删除在行内设置了class的情况.一般在做鼠标事件时通过JS添加的class,可以通过数组,先把行内class储存在数组,然后需要时,在用这个储存好的数组在需要的时候更新.

var arrClassName=[];
   //初始化其他兄弟元素的classname
        function updateClassName(ele){
            for(var i = 1;i < ele.parentNode.childNodes.length;i += 4){
                ele.parentNode.childNodes[i].className = arrClassName[i];
            }
        }