原生js实现addClass,removeClass,hasClass方法

 更新时间:2016年04月27日 08:48:00   投稿:lijiao  
这篇文章主要介绍了原生js实现addClass,removeClass,hasClass方法和使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能,需要的朋友可以参考下

本文分为两部分进行讲解,具体内容如下

第一部分:原生js实现addClass,removeClass,hasClass方法

function hasClass(elem, cls) {
  cls = cls || '';
  if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回false
  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
}

function addClass(ele, cls) {
  if (!hasClass(elem, cls)) {
    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
  }
}

function removeClass(ele, cls) {
  if (hasClass(elem, cls)) {
    var newClass = ' ' + elem.className.replace(/[\t\r\n]/g, '') + ' ';
    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
      newClass = newClass.replace(' ' + cls + ' ', ' ');
    }
    elem.className = newClass.replace(/^\s+|\s+$/g, '');
  }
}

第二部分:使用原生JS实现jQuery的addClass, removeClass, hasClass函数功能

function addClass(obj, cls){
  var obj_class = obj.className,//获取 class 内容.
  blank = (obj_class != '') ? ' ' : '';//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
  added = obj_class + blank + cls;//组合原来的 class 和需要添加的 class.
  obj.className = added;//替换原来的 class.
}
 
function removeClass(obj, cls){
  var obj_class = ' '+obj.className+' ';//获取 class 内容, 并在首尾各加一个空格. ex) 'abc    bcd' -> ' abc    bcd '
  obj_class = obj_class.replace(/(\s+)/gi, ' '),//将多余的空字符替换成一个空格. ex) ' abc    bcd ' -> ' abc bcd '
  removed = obj_class.replace(' '+cls+' ', ' ');//在原来的 class 替换掉首尾加了空格的 class. ex) ' abc bcd ' -> 'bcd '
  removed = removed.replace(/(^\s+)|(\s+$)/g, '');//去掉首尾空格. ex) 'bcd ' -> 'bcd'
  obj.className = removed;//替换原来的 class.
}
 
function hasClass(obj, cls){
  var obj_class = obj.className,//获取 class 内容.
  obj_class_lst = obj_class.split(/\s+/);//通过split空字符将cls转换成数组.
  x = 0;
  for(x in obj_class_lst) {
    if(obj_class_lst[x] == cls) {//循环数组, 判断是否包含cls
      return true;
    }
  }
  return false;
}

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

相关文章

  • 20行js代码实现的贪吃蛇小游戏

    20行js代码实现的贪吃蛇小游戏

    曾经诺基亚的贪吃蛇风靡一时,在游戏匮乏的年代,用Java实现太难,现在网页制作20行代码就做成一个简单的demo了,下面这篇文章主要给大家介绍了利用20行js代码实现的贪吃蛇小游戏,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-06-06
  • uniapp中使用videojs构建H5直播播放器

    uniapp中使用videojs构建H5直播播放器

    这篇文章主要为大家介绍了uniapp中使用videojs构建H5直播播放器实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • 微信小程序实现蒙版弹出窗功能

    微信小程序实现蒙版弹出窗功能

    这篇文章主要介绍了微信小程序实现蒙版弹出窗功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • 利用JS实现scroll自定义滚动效果详解

    利用JS实现scroll自定义滚动效果详解

    这篇文章主要给大家介绍了关于利用JS如何实现scroll自定义滚动效果的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-10-10
  • 用js实现多域名不同文件的调用方法

    用js实现多域名不同文件的调用方法

    用js实现多域名不同文件的调用方法...
    2007-01-01
  • JavaScript trim 去除字符串空格的三种方法(附代码详解)

    JavaScript trim 去除字符串空格的三种方法(附代码详解)

    个人认为最好的方法.采用的是正则表达式,这是最核心的原理.因为空格有多种形式。
    2010-05-05
  • 微信小程序使用wxParse解析html的方法示例

    微信小程序使用wxParse解析html的方法示例

    这篇文章主要介绍了微信小程序使用wxParse解析html的方法,结合实例形式详细分析了wxParse的下载、导入及具体使用技巧,需要的朋友可以参考下
    2019-01-01
  • 详解关于webpack多入口热加载很慢的原因

    详解关于webpack多入口热加载很慢的原因

    这篇文章主要介绍了详解关于webpack多入口热加载很慢的原因,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • javascript中基本类型和引用类型的区别分析

    javascript中基本类型和引用类型的区别分析

    大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别。下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引用类型(Reference Types)的区别。
    2015-05-05
  • 用javascript实现li 列表数据隔行变换背景颜色

    用javascript实现li 列表数据隔行变换背景颜色

    客户端效果,效率自然不错。以前的做法是偶数行时给li加一个class,方法当然不可取,如果后台读取再加class就很麻烦了,看看这个效果
    2007-08-08

最新评论