JS原生addClass、removeClass实现
用jQuery的addClass()、removeClass()时手痒,想了解下原生JavaScript是怎么实现的这类功能。
方法一:还是用到了其他函数辅助,所以看着简短些。
function addClass(ele,classname){
ele.className += " " + classname;//
};
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];
}
}