原生js实现addClass,removeClass和toggleClass

综述

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的时候使用，需要的就可以直接拿去。

 

工作累了吧，可以扫描二维码关注公众号，看看轻松的文章，放松一下。再忙，也该有自己的生活，一定要爱惜身体！