原生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 相关文章推荐
JavaScript 私有成员分析
Jan 13 Javascript
学习ExtJS form布局
Oct 08 Javascript
使用js实现按钮控制文本框加1减1应用于小时+分钟
Dec 09 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
Oct 10 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
react+redux仿微信聊天界面
Jun 21 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP脚本的10个技巧(1)
2006/10/09 PHP
PHP语言中global和$GLOBALS[]的分析 之二
2012/02/02 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
让回调函数 showResponse 也带上参数的代码
2007/08/13 Javascript
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
jQuery 选择器详解
2015/01/19 Javascript
js控制文本框只输入数字和小数点的方法
2015/03/10 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
JS中对数组元素进行增删改移的方法总结
2016/12/15 Javascript
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
vue单页应用中如何使用jquery的方法示例
2017/07/27 jQuery
微信小程序基于本地缓存实现点赞功能的方法
2017/12/18 Javascript
vuex操作state对象的实例代码
2018/04/25 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
用python + hadoop streaming 分布式编程(一) -- 原理介绍,样例程序与本地调试
2014/07/14 Python
Python中atexit模块的基本使用示例
2015/07/08 Python
python多进程控制学习小结
2018/10/31 Python
python tkinter基本属性详解
2019/09/16 Python
jenkins配置python脚本定时任务过程图解
2019/10/29 Python
git查看、创建、删除、本地、远程分支方法详解
2020/02/18 Python
python GUI库图形界面开发之PyQt5打开保存对话框QFileDialog详细使用方法与实例
2020/02/27 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
益模软件Java笔试题
2012/03/27 面试题
校三好学生主要事迹
2014/01/11 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
县级领导干部开展党的群众路线教育实践活动工作汇报
2014/10/25 职场文书
2014年污水处理厂工作总结
2014/12/19 职场文书
个人更名证明
2015/06/23 职场文书
放假通知怎么写
2015/08/18 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸