JS原生addClass、removeClass实现

来源：互联网发布：mac cad格式问题编辑：程序博客网时间：2024/06/03 00:37

用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];            }        }

1 0