原生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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
Firefox getBoxObjectFor getBoundingClientRect联系
Oct 26 Javascript
Extjs学习笔记之三 extjs form更多的表单项
Jan 07 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
javascript setTimeout和setInterval计时的区别详解
Jun 21 Javascript
详谈JavaScript内存泄漏
Nov 14 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
Vue filters过滤器的使用方法
Jul 14 Javascript
简单谈谈关于Angular Cli打包的事
Sep 05 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 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安全编程之加密功能
2006/10/09 PHP
php实现rc4加密算法代码
2012/04/25 PHP
PHP中数组的三种排序方法分享
2012/05/07 PHP
PHP实现把MySQL数据库导出为.sql文件实例(仿PHPMyadmin导出功能)
2014/05/10 PHP
php+ajax注册实时验证功能
2016/07/20 PHP
thinkPHP中钩子的两种配置调用方法详解
2016/11/11 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
Jquery性能优化详解
2014/05/15 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
完全深入学习Bootstrap表单
2016/11/28 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
VUE中使用MUI方法
2019/02/12 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
Python中的一些陷阱与技巧小结
2015/07/10 Python
在Python的Django框架中创建和使用模版
2015/07/15 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python 随机按键模拟2小时
2020/12/30 Python
Python关于拓扑排序知识点讲解
2021/01/04 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
庆七一活动方案
2014/01/25 职场文书
实验教师岗位职责
2014/02/13 职场文书
个人四风问题对照检查材料
2014/10/01 职场文书
中学生旷课检讨书2篇
2014/10/09 职场文书
2014年民警工作总结
2014/11/25 职场文书
2014年教育培训工作总结
2014/12/08 职场文书
给朋友的赠语
2015/06/23 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python
Spring Boot 启动、停止、重启、状态脚本
2021/06/26 Java/Android
opencv检测动态物体的实现
2021/07/21 Python