原生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 相关文章推荐
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
Feb 23 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
Bootstrap栅格系统使用方法及页面调整变形的解决方法
Mar 10 Javascript
Node.js 中使用 async 函数的方法
Nov 20 Javascript
jfinal与bootstrap的登出实战详解
Nov 27 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
Sep 02 Javascript
js 实现验证码输入框示例详解
Sep 23 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
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
聊天室php&amp;mysql(二)
2006/10/09 PHP
一个显示某段时间内每个月的方法 返回由这些月份组成的数组
2012/05/16 PHP
php数组相加 array(“a”)+array(“b”)结果还是array(“a”)
2012/09/19 PHP
php5.4以下版本json不支持不转义内容中文的解决方法
2015/01/13 PHP
php抽象类用法实例分析
2015/07/07 PHP
laravel 解决crontab不执行的问题
2019/10/22 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
XAMPP升级PHP版本实现步骤解析
2020/09/04 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
jQuery 页面 Mask实现代码
2010/01/09 Javascript
nodejs入门详解(多篇文章结合)
2012/03/07 NodeJs
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
javascript中select下拉框的用法总结
2016/01/07 Javascript
AngularJS 单元测试(二)详解
2016/09/21 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
python判断字符串是否是json格式方法分享
2017/11/07 Python
解决Pycharm后台indexing导致不能run的问题
2019/06/27 Python
python算法题 链表反转详解
2019/07/02 Python
python梯度下降算法的实现
2020/02/24 Python
python使用pandas抽样训练数据中某个类别实例
2020/02/28 Python
windows10在visual studio2019下配置使用openCV4.3.0
2020/07/14 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
JD Sports芬兰:英国领先的运动鞋和运动服饰零售商
2018/11/16 全球购物
weblogic面试题
2016/03/07 面试题
生物化工工艺专业应届生求职信
2013/10/08 职场文书
干部培训自我鉴定
2014/01/22 职场文书
先进党支部事迹材料
2014/12/24 职场文书
如何撰写出一份完美的商业计划书?
2019/07/12 职场文书
openstack中的rpc远程调用的方法
2021/07/09 Python