原生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 相关文章推荐
发现的以前不知道的函数
Sep 19 Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 Javascript
JQuery与JSon实现的无刷新分页代码
Sep 13 Javascript
JQuery为textarea添加maxlength属性并且兼容IE
Apr 25 Javascript
基于JavaScript 类的使用详解
May 07 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
javascript:void(0)点击登录没反应怎么解决
Nov 13 Javascript
jQuery通用的全局遍历方法$.each()用法实例
Jul 04 Javascript
基于JavaScript实现Tab选项卡切换效果
Nov 24 Javascript
Vue.js移动端左滑删除组件的实现代码
Sep 08 Javascript
Nuxt升级2.0.0时出现的问题(小结)
Oct 08 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 Vue.js
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
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
那些年我们错过的魔术方法(Magic Methods)
2014/01/14 PHP
PHP Try-catch 语句使用技巧
2016/02/28 PHP
php用户密码加密算法分析【Discuz加密算法】
2016/10/12 PHP
PHP实现链表的定义与反转功能示例
2018/06/09 PHP
php实现 master-worker 守护多进程模式的实例代码
2019/07/20 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
YUI模块开发原理详解
2013/11/18 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
JavaScript中textRange对象使用方法小结
2015/03/24 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
2016/10/05 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
2017/07/08 jQuery
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
node.js部署之启动后台运行forever的方法
2018/05/23 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
2019/02/19 Javascript
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python通过for循环理解迭代器和生成器实例详解
2019/02/16 Python
Python魔法方法 容器部方法详解
2020/01/02 Python
浅谈Pytorch中的自动求导函数backward()所需参数的含义
2020/02/29 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
数据库连接池的工作原理
2012/09/26 面试题
New delete 与malloc free 的联系与区别
2013/02/04 面试题
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
审计工作个人的自我评价
2013/12/25 职场文书
团队精神的演讲稿
2014/05/14 职场文书
反腐倡廉剖析材料
2014/09/30 职场文书
幼儿园工作总结2015
2015/04/01 职场文书
锦旗赠语
2015/06/23 职场文书
致接力运动员加油稿
2015/07/21 职场文书