原生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的设计模式
Nov 22 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
Sep 04 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
javascript中处理时间戳为日期格式的方法
Jan 02 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
基于node实现websocket协议
Apr 25 Javascript
玩转JavaScript OOP - 类的实现详解
Jun 08 Javascript
简单理解vue中实例属性vm.$els
Dec 01 Javascript
HTML中使背景图片自适应浏览器大小实例详解
Apr 06 Javascript
javascript input输入框模糊提示功能的实现
Sep 25 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
JQuery中的常用事件、对象属性与使用方法分析
Dec 23 jQuery
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
简单的php文件上传(实例)
2013/10/27 PHP
yii2.0之GridView自定义按钮和链接用法
2014/12/15 PHP
PHP使用glob函数遍历目录或文件夹的方法
2014/12/16 PHP
php中判断数组相等的方法以及数组运算符介绍
2015/03/30 PHP
thinkphp命名空间用法实例详解
2015/12/30 PHP
JSON两种结构之对象和数组的理解
2016/07/19 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
让JavaScript拥有类似Lambda表达式编程能力的方法
2010/09/12 Javascript
动态添加删除表格行的js实现代码
2014/02/28 Javascript
JavaScript实现大数的运算
2014/11/24 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
深入浅析JavaScript中的constructor
2016/04/19 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
js运动事件函数详解
2016/10/21 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
JavaScript如何获取一个元素的样式信息
2019/07/29 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
2020/03/08 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
基于ant design日期控件使用_仅月份的操作
2020/10/27 Javascript
python中pytest收集用例规则与运行指定用例详解
2019/06/27 Python
Python使用__new__()方法为对象分配内存及返回对象的引用示例
2019/09/20 Python
解决python DataFrame 打印结果不换行问题
2020/04/09 Python
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法
2020/08/18 Python
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
建筑设计所实习生自我鉴定
2013/09/25 职场文书
行政管理专业推荐信
2013/11/02 职场文书
给客户的道歉信
2014/01/13 职场文书
企业厂务公开实施方案
2014/03/26 职场文书
2014年志愿者工作总结
2014/11/20 职场文书
个人股份转让协议书范本
2015/01/28 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
python源码剖析之PyObject详解
2021/05/18 Python