原生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 相关文章推荐
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
JS实现随机化快速排序的实例代码
Aug 01 Javascript
JavaScript模块随意拖动示例代码
May 27 Javascript
javascript计时器详解
Feb 28 Javascript
js判断移动端是否安装某款app的多种方法
Dec 18 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
javascript弹出窗口中增加确定取消按钮
Jun 24 Javascript
微信小程序 自定义消息提示框
Aug 06 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
js技巧之十几行的代码实现vue.watch代码
Jun 09 Javascript
layui清空,重置表单数据的实例
Sep 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
php xml常用函数的集合(比较详细)
2013/06/06 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
php如何实现不借助IDE快速定位行数或者方法定义的文件和位置
2017/01/17 PHP
PHP实现微信支付(jsapi支付)流程步骤详解
2018/03/15 PHP
深入研究PHP中的preg_replace和代码执行
2018/08/15 PHP
JavaScript 小型打飞机游戏实现原理说明
2010/10/28 Javascript
XMLHttpRequest处理xml格式的返回数据(示例代码)
2013/11/21 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
nodejs学习笔记之路由
2017/03/27 NodeJs
3分钟掌握常用的JS操作JSON方法总结
2017/04/25 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
2017/08/19 jQuery
关于Angularjs中跨域设置白名单问题
2018/04/17 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
Three.js实现简单3D房间布局
2018/12/30 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
p5.js临摹动态图形实现方法详解
2019/10/23 Javascript
小程序实现录音功能
2020/09/22 Javascript
[04:59]DOTA2-DPC中国联赛 正赛 Ehome vs iG 选手采访
2021/03/11 DOTA
简单介绍Python中的RSS处理
2015/04/13 Python
使用python实现生成用户信息
2017/03/20 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
Python龙贝格法求积分实例
2020/02/29 Python
python如何写个俄罗斯方块
2020/11/06 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
用HTML5.0制作网页的教程
2010/05/30 HTML / CSS
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
全球最大的在线橄榄球商店:Lovell Rugby
2018/05/20 全球购物
意大利独特而优质的家居用品:Fazzini
2018/12/05 全球购物
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
咖啡蛋糕店创业计划书
2014/01/28 职场文书
公司行政专员岗位职责
2014/08/24 职场文书
物业保洁员岗位职责
2015/02/13 职场文书