原生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 相关文章推荐
动态修改DOM 里面的 id 属性的弊端分析
Sep 03 Javascript
从数组中随机取x条不重复数据的JS代码
Dec 24 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
jQuery实现自动调整字体大小的方法
Jun 15 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
基于Angularjs实现分页功能
May 30 Javascript
全面解析jQuery $(document).ready()和JavaScript onload事件
Jun 08 Javascript
关于JavaScript和jQuery的类型判断详解
Oct 08 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
Bootstrap Table使用整理(二)
Jun 09 Javascript
JS FormData上传文件的设置方法
Jul 05 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 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脚本数据库功能详解(下)
2006/10/09 PHP
php获取域名的google收录示例
2014/03/24 PHP
PHP判断浏览器、判断语言代码分享
2015/03/05 PHP
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP5.0~5.6 各版本兼容性cURL文件上传功能实例分析
2018/05/11 PHP
php生成二维码不保存服务器还有下载功能的实现代码
2018/08/09 PHP
PHP htmlspecialchars()函数用法与实例讲解
2019/03/08 PHP
PHP连接SQL server数据库测试脚本运行实例
2020/08/24 PHP
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
2011/10/12 Javascript
jQuery之$(document).ready()使用介绍
2012/04/05 Javascript
将文本输入框内容加入表中的js代码
2013/08/18 Javascript
JavaScript按位运算符的应用简析
2014/02/04 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
Bootstrap基本组件学习笔记之导航(10)
2016/12/07 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
javascript设计模式 ? 建造者模式原理与应用实例分析
2020/04/10 Javascript
jquery实现抽奖功能
2020/10/22 jQuery
Python使用turtule画五角星的方法
2015/07/09 Python
Django验证码的生成与使用示例
2017/05/20 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
基于Python生成个性二维码过程详解
2020/03/05 Python
什么是Python中的顺序表
2020/06/02 Python
Django url 路由匹配过程详解
2021/01/22 Python
广州迈达威.net面试题目
2012/03/10 面试题
大学军训通讯稿
2014/01/13 职场文书
教师师德演讲稿
2014/05/06 职场文书
购房协议书范本(无房产证)
2014/10/07 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书
鲲鹏 CentOS 7 安装Python3.7
2022/05/11 Servers
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers