原生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 相关文章推荐
快速解决FusionCharts联动的中文乱码问题
Dec 04 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
Javascript高级技巧分享
Feb 25 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
使用 js 简单的实现 bind、call 、aplly代码实例
Sep 07 Javascript
JS函数基本定义与用法示例
Jan 15 Javascript
JS手写一个自定义Promise操作示例
Mar 16 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
类和原型的设计模式之复制与委托差异
Jul 07 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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
Linux下实现PHP多进程的方法分享
2012/08/16 PHP
PHP编程函数安全篇
2013/01/08 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
php中final关键字用法分析
2016/12/07 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
JQuery为textarea添加maxlength属性的代码
2010/04/07 Javascript
浅析Bootstrip的select控件绑定数据的问题
2016/05/10 Javascript
JavaScript中判断数据类型的方法总结
2016/05/24 Javascript
浅谈jQuery添加的HTML,JS失效的问题
2016/10/05 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
微信小程序中子页面向父页面传值实例详解
2017/03/20 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
JavaScript中splice与slice的区别
2017/05/09 Javascript
node内置调试方法总结
2018/02/22 Javascript
浅谈webpack 构建性能优化策略小结
2018/06/13 Javascript
利用不到200行代码写一款属于你自己的js类库
2019/07/08 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
Pycharm取消py脚本中SQL识别的方法
2018/11/29 Python
python中下标和切片的使用方法解析
2019/08/27 Python
巧用 CSS3的webkit-box-reflect 倒影实现各类动效
2021/03/05 HTML / CSS
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
意大利单身交友网站:Meetic
2020/07/12 全球购物
本科毕业生自我鉴定
2013/11/02 职场文书
英文留学推荐信范文
2014/01/25 职场文书
本科生就业推荐信
2014/05/19 职场文书
小学关爱留守儿童活动方案
2014/08/25 职场文书
专业技术职务聘任证明
2015/03/02 职场文书
市级三好生竞选稿
2015/11/21 职场文书
品牌形象定位,全面分析
2019/07/23 职场文书
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis