原生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
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值