原生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程序 入门者学习
Jul 09 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
javascript是怎么继承的介绍
Jan 05 Javascript
动态加载js文件简单示例
Apr 21 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
ES6新特性之字符串的扩展实例分析
Apr 01 Javascript
JS滚动到指定位置导航栏固定顶部
Jul 03 Javascript
VUE实现表单元素双向绑定(总结)
Aug 08 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
JS实现倒计时图文效果
Nov 17 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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
解析argc argv在php中的应用
2013/06/24 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
javaScript复制功能调用实现方案
2012/12/13 Javascript
JavaScript中的原型和继承详解(图文)
2014/07/18 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
常用的jQuery前端技巧收集
2014/12/24 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
Json解析的方法小结
2016/06/22 Javascript
jQuery 特性操作详解及实例代码
2016/09/29 Javascript
jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案
2016/12/19 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
利用node.js如何创建子进程详解
2017/12/09 Javascript
Javascript获取某个月的天数
2018/05/30 Javascript
15个顶级开源JavaScript框架和库
2018/10/10 Javascript
使用webpack搭建vue项目及注意事项
2019/06/10 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
linux下python抓屏实现方法
2015/05/22 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python实现PS滤镜Fish lens图像扭曲效果示例
2018/01/29 Python
python将字符串list写入excel和txt的实例
2019/07/20 Python
np.newaxis 实现为 numpy.ndarray(多维数组)增加一个轴
2019/11/30 Python
Flask 上传自定义头像的实例详解
2020/01/09 Python
详解基于 Canvas 手撸一个六边形能力图
2019/09/02 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
Nike意大利官网:Nike.com IT
2020/01/19 全球购物
现金会计岗位职责
2013/12/05 职场文书
年终总结会主持词
2014/03/25 职场文书
学生上课看漫画的检讨书
2014/09/26 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
胡桃夹子观后感
2015/06/11 职场文书
保姆聘用合同
2015/09/21 职场文书
用Java实现简单计算器功能
2021/07/21 Java/Android
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python