原生js封装添加class,删除class的实例

 更新时间:2017年11月06日 10:23:22   作者:一步一步向上爬  
下面小编就为大家带来一篇原生js封装添加class,删除class的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望对大家有所帮助

一、添加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的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 网页前台通过js非法字符过滤代码(骂人的话等等)

    网页前台通过js非法字符过滤代码(骂人的话等等)

    项目中如果需要过滤非法字符(你不想用户输入的任何字符)的话在前台可以使用js过滤,同样可以提高用户体验,以前都是后台过滤,这样双重过滤用户体验更好。
    2010-05-05
  • 微信APP生命周期及页面生命周期示例详解

    微信APP生命周期及页面生命周期示例详解

    这篇文章主要为大家介绍了微信APP生命周期及页面生命周期当然示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步早日升职加薪
    2022-04-04
  • 详解如何使用JavaScript构建主题切换器

    详解如何使用JavaScript构建主题切换器

    这篇文章主要为大家详细介绍了如何使用JavaScript构建一个主题切换器,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-01-01
  • html5+javascript制作简易画板附图

    html5+javascript制作简易画板附图

    这篇文章主要介绍了使用html5+javascript制作的简易画板,需要的朋友可以参考下
    2014-04-04
  • uni-app打开外部链接方式总结(h5和app)

    uni-app打开外部链接方式总结(h5和app)

    uni-app在app和h5中跳转至外部链接的方式有所不同,需要进行条件编译,下面这篇文章主要给大家介绍了关于uni-app打开外部链接方式(h5和app)的相关资料,文章通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • JavaScript代码实现txt文件的上传预览功能

    JavaScript代码实现txt文件的上传预览功能

    本篇文章给大家介绍了JavaScript代码实现txt文件的上传预览功能,文字代码相结合的形式给大家介绍的非常详细,需要的朋友参考下吧
    2018-03-03
  • 实现lightBox时的样式与行为分离减少JS

    实现lightBox时的样式与行为分离减少JS

    本教程旨在实现lightBox时的样式与行为分离,减少JS在各方面(全屏遮蔽、ie6中遮蔽select、双向居中、高度自适应内容等)的工作。
    2009-07-07
  • JS实现灯泡开关特效

    JS实现灯泡开关特效

    这篇文章主要为大家详细介绍了JS实现灯泡开关特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-10-10
  • js实现微信聊天界面

    js实现微信聊天界面

    这篇文章主要为大家详细介绍了js实现微信聊天界面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • JS取得绝对路径的实现代码

    JS取得绝对路径的实现代码

    这篇文章主要介绍了JS取得绝对路径的实现代码,需要的朋友可以参考下
    2015-01-01

最新评论