原生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程序设计有所帮助。

相关文章

  • 原生js实现简单的链式操作

    原生js实现简单的链式操作

    这篇文章主要介绍了原生js实现简单的链式操作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • 使用TypeScript接口优化数据结构的示例详解

    使用TypeScript接口优化数据结构的示例详解

    在现代软件开发中,数据结构的设计至关重要,它直接影响到程序的性能和可维护性,TypeScript 作为一种静态类型的超集,为 JavaScript 带来了类型系统,本文将探讨如何利用 TypeScript 的接口(Interfaces)来优化数据结构,需要的朋友可以参考下
    2024-09-09
  • js检查是否全是中文

    js检查是否全是中文

    判断是否全是中文的脚本
    2008-09-09
  • JS实现简单的九宫格抽奖

    JS实现简单的九宫格抽奖

    这篇文章主要为大家详细介绍了JS实现简单的九宫格抽奖,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-06-06
  • 如何使用pdf.js展示pdf文件(亲测可用)

    如何使用pdf.js展示pdf文件(亲测可用)

    这篇文章主要介绍了如何使用pdf.js展示pdf文件(亲测可用),如果只是电脑端,可通过 iframe 标签嵌套预览,文中介绍了安装电脑ios的通用方法,感兴趣的朋友跟随小编一起看看吧
    2023-10-10
  • javascript运算符——逻辑运算符全面解析

    javascript运算符——逻辑运算符全面解析

    下面小编就为大家带来一篇javascript运算符——逻辑运算符详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • uniapp 引用 js 组件的方法(场景分析)

    uniapp 引用 js 组件的方法(场景分析)

    在UniApp开发过程中,我们不仅需要掌握各种UI组件的使用方法,还需要了解如何在项目中引入JS文件,在本文中,我将介绍UniApp中如何引入JS的方法,感兴趣的朋友跟随小编一起看看吧
    2023-09-09
  • js实现盒子拖拽动画效果

    js实现盒子拖拽动画效果

    这篇文章主要为大家详细介绍了js实现盒子拖拽动画效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 原生JS实现N级菜单的代码

    原生JS实现N级菜单的代码

    最近有项目要实现N级菜单,首先从布局入手,即判断是否有下级菜单,具体实现代码,大家可以参考下本文
    2017-05-05
  • Js参数RSA加密传输之jsencrypt.js的使用

    Js参数RSA加密传输之jsencrypt.js的使用

    这篇文章主要介绍了Js参数RSA加密传输之jsencrypt.js的使用,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02

最新评论