版权声明:本文为博主原创文章,若转载,请注明出处及作者,谢谢! https://blog.csdn.net/qq_38047742/article/details/82838439
综述
Jquerys实现class的add,remove和toggle是十分方便的。而H5新增的classList方法,也让原生js的各种class操作变得方便起来。然而,兼容性来了,classList只兼容IE10及以上(这里只提IE吧,IE是前端过不去的兼容坎),因此十分想方便的用原生js,又纠结在了兼容性上,干脆,那就自己来实现一下吧,都给它扔进去,兼容的就classList,不兼容的就用插件方法,哈,还是比较完美的。
多话不说,直接贡献代码吧。
addClass(el,...classes)
function addClass(el,...classes) {
/*如果不兼容es6,则可以去掉参数的...classes,
*然后让new_class = [].slice.call(arguments, 1),
*当然使用babel更好*/
let new_class = classes,
class_list = el.className,
new_array = [],//最终class
class_list_arr = class_list.split(" ");
//添加
class_list_arr = class_list_arr.concat(new_class);
//去重
/* 用es6的set和Array.from配合会更加简单的完成这一步
* new_array = Array.from(new Set(class_list_arr));
* 本来可以一步搞定
* IE大王不支持Array.from方法,另辟蹊径用传统去重吧,以下是其中一种方法。
*/
for(let i = 0; i < class_list_arr.length; i++) {
if(class_list_arr.indexOf(class_list_arr[i]) === i) {
new_array.push(class_list_arr[i]);
};
};
el.className = new_array.join(" ");
};
第一个参数是节点,后面是class名称,有多少,写多少吧,逗号一个一个分开就行,如果已存在的则不会添加。内部实现代码很清楚。
removeClass(el,...classes)
function removeClass(el,...classes) {
let old_class = classes,
class_list = el.className,
class_list_arr = class_list.split(" ");
//循环判断是否相同的类,有则删除
for(let i = 0; i < old_class.length; i++) {
for(let j = 0; j < class_list_arr.length; j++) {
//如果有相同的类,则删除,否则不予理会
if(class_list_arr[j] === old_class[i]) {
class_list_arr.splice(j, 1);
break; //找到就跳出内层循环,减少消耗
};
};
};
el.className = class_list_arr.join(" ");
};
参数不啰嗦,和add处理一样,并且传入不存在的class,会直接忽略,不报错。
toggleClass(el,class_name)
function toggleClass(el,class_name){
let class_list = el.className,
class_list_arr = class_list.split(" ");
//如果要兼容IE8以下,这个判断地方改成传统循环就行
if (class_list_arr.some(function(item,i,arr){return item === class_name})) {
//删除
for(let i = 0; i < class_list_arr.length; i++) {
//如果有相同的类,则删除,否则不予理会
if(class_list_arr[i] === class_name) {
class_list_arr.splice(i, 1);
break; //找到就跳出循环,减少消耗
};
};
}else{
//添加
class_list_arr.push(class_name);
}
el.className = class_list_arr.join(" ");
}
这个就更简单了,没有es6参与,就是传统方法,传入要改变的clsss,则会根据情况添加或删除。
以上三个方法,可以在不兼容classList,仅使用原生js的时候使用,需要的就可以直接拿去。