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


Posted in Javascript onApril 27, 2016

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

第一部分:原生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程序设计有所帮助。

Javascript 相关文章推荐
Javascript学习笔记7 原型链的原理
Jan 11 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
代码分析jQuery四种静态方法使用
Jul 23 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
javascript日期格式化方法汇总
Oct 04 Javascript
JavaScript知识点总结之如何提高性能
Jan 15 Javascript
JavaScript事件用法浅析
Oct 31 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
Nov 24 Javascript
JavaScript变量提升和严格模式实例分析
Jan 27 Javascript
JavaScript 函数用法详解【函数定义、参数、绑定、作用域、闭包等】
May 12 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 #Javascript
常用原生JS兼容性写法汇总
Apr 27 #Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 #Javascript
跨域资源共享 CORS 详解
Apr 26 #Javascript
Bootstrap滚动监听(Scrollspy)插件详解
Apr 26 #Javascript
JS组件Bootstrap实现下拉菜单效果代码
Apr 26 #Javascript
基于Jquery插件实现跨域异步上传文件功能
Apr 26 #Javascript
You might like
PHP5中MVC结构学习
2006/10/09 PHP
PHP 数据结构 算法描述 冒泡排序 bubble sort
2011/07/10 PHP
仿dedecms下拉分页样式修改的thinkphp分页类实例
2014/10/30 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
JS面试题---关于算法台阶的问题
2016/07/26 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
详解Nodejs内存治理
2018/05/13 NodeJs
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
Vue+Typescript中在Vue上挂载axios使用时报错问题
2019/08/07 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
Python查看多台服务器进程的脚本分享
2014/06/11 Python
python实战之实现excel读取、统计、写入的示例讲解
2018/05/02 Python
Python基于dom操作xml数据的方法示例
2018/05/12 Python
python tkinter界面居中显示的方法
2018/10/11 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python 利用已有Ner模型进行数据清洗合并代码
2019/12/24 Python
IronPython连接MySQL的方法步骤
2019/12/27 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
艺术系应届生的自我评价
2013/10/19 职场文书
生产主管岗位职责
2013/11/10 职场文书
2014应届本科生自我评价
2014/09/13 职场文书
经营场所证明范本
2015/06/19 职场文书
会议简报格式范文
2015/07/20 职场文书
干部培训简讯
2015/07/20 职场文书
法院执行局工作总结
2015/08/11 职场文书
文明礼貌主题班会
2015/08/14 职场文书
大学生入党自我鉴定范文
2019/06/21 职场文书
MySQL笔记 —SQL运算符
2022/01/18 MySQL
源码分析Redis中 set 和 sorted set 的使用方法
2022/03/22 Redis