原生js封装添加class,删除class的实例


Posted in Javascript onNovember 06, 2017

一、添加class

function addClass(ele,cName) {
 var arr = ele.className.split(' ').concat(cName.split(" "));
 for(var i=0;i<arr.length;i++){
  for(var k=arr.length-1;k>i;k--){
   (arr[k]==="")&&arr.splice(k,1);
   (arr[i]===arr[k])&&arr.splice(k,1);
  }
 }
 ele.className = arr.join(" ");
}

二、删除class

function removeClass(ele,cName) {
 var arr1 = ele.className.split(' ');
 var arr2 = cName.split(" ");
 for(var i=0;i<arr2.length;i++)for(var j=arr1.length-1;j>=0;j--)(arr2[i]===arr1[j])&&arr1.splice(j,1)
 ele.className = arr1.join(" ")
}

其中还有一点空格的问题没有解决,如果你能学到一点东西,我会非常开心。

以上这篇原生js封装添加class,删除class的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的asp.net树实现代码
Nov 30 Javascript
JavaScript中遍历对象的property的3种方法介绍
Dec 30 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
jQuery实现鼠标划过修改样式的方法
Apr 14 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
jquery实现网站列表切换效果的2种方法
Aug 12 Javascript
ECMAScript6--解构
Mar 30 Javascript
react开发教程之React 组件之间的通信方式
Aug 12 Javascript
微信小程序自定义头部导航栏(组件化)
Nov 15 Javascript
JavaScript冒泡算法原理与实现方法深入理解
Jun 04 Javascript
vue.js 使用原生js实现轮播图
Apr 26 Vue.js
Node.js实现发送邮件功能
Nov 06 #Javascript
快速搭建React的环境步骤详解
Nov 06 #Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 #Javascript
two.js之实现动画效果示例
Nov 06 #Javascript
JS实现图片放大镜插件详解
Nov 06 #Javascript
js定时器实现倒计时效果
Nov 05 #Javascript
Vuejs实现购物车功能
Nov 05 #Javascript
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
再说下636单管机
2021/03/02 无线电
ecshop 2.72如何修改后台访问地址
2015/03/03 PHP
PHP使用mysqli操作MySQL数据库的简单方法
2017/02/04 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
jQuery实现返回顶部效果的方法
2015/05/29 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
JQuery+EasyUI轻松实现步骤条效果
2016/02/22 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
2016/12/22 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
vue input标签通用指令校验的实现
2019/11/05 Javascript
vue和小程序项目中使用iconfont的方法
2020/05/19 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
python实现定制交互式命令行的方法
2014/07/03 Python
Python实现动态添加类的属性或成员函数的解决方法
2014/07/16 Python
python获取文件扩展名的方法
2015/07/06 Python
分享Python开发中要注意的十个小贴士
2016/08/30 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
python使用zip将list转为json的方法
2018/12/31 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
Python语言异常处理测试过程解析
2020/01/08 Python
pytorch中的weight-initilzation用法
2020/06/24 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
爱岗敬业演讲稿
2014/05/05 职场文书
“四风”问题对照检查材料思想汇报
2014/09/16 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
个人作风建设心得体会
2014/10/22 职场文书
安全隐患整改报告
2014/11/06 职场文书
2015年体育教学工作总结
2015/05/20 职场文书
赢在执行观后感
2015/06/16 职场文书
导游词之神仙居景区
2019/11/15 职场文书