原生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 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
javascript window.confirm确认 取消对话框实现代码小结
Oct 21 Javascript
从零学JS之你需要了解的几本书
May 19 Javascript
ie 7/8不支持trim的属性的解决方案
May 23 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 Javascript
Vue中使用vux的配置详解
May 05 Javascript
Vue2.0结合webuploader实现文件分片上传功能
Mar 09 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
Mint UI实现A-Z字母排序的城市选择列表
Dec 28 Javascript
JavaScript获取某一天所在的星期
Sep 05 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
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
PHP Oauth授权和本地加密实现方法
2016/08/12 PHP
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PassWord输入框代码分享
2016/06/07 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
weUI应用之JS常用信息提示弹层的封装
2016/11/21 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
vue自定义底部导航栏Tabbar的实现代码
2018/09/03 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
JSX在render函数中的应用详解
2019/09/04 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
Python中3种内建数据结构:列表、元组和字典
2014/11/30 Python
在Python中使用HTML模版的教程
2015/04/29 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
python 制作简单的音乐播放器
2020/11/25 Python
传统HTML页面实现模块化加载的方法
2018/10/15 HTML / CSS
艺术应用与设计专业个人的自我评价
2013/11/19 职场文书
2013的个人自我评价
2013/12/26 职场文书
会计电算化个人求职信范文
2014/01/24 职场文书
测试工程师程序员求职信范文
2014/02/20 职场文书
金融管理专业毕业生求职信
2014/03/12 职场文书
司机工作自我鉴定
2014/09/19 职场文书
2014年导购员工作总结
2014/11/18 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
世界遗产导游词
2015/02/13 职场文书
SQL语法CONSTRAINT约束操作详情
2022/01/18 MySQL