原生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 相关文章推荐
window.location和document.location的区别分析
Dec 23 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
Jan 09 Javascript
Kibo 用于处理键盘事件的Javascript工具库
Oct 28 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 Javascript
AngularJS实现分页显示数据库信息
Jul 01 Javascript
node+koa2+mysql+bootstrap搭建一个前端论坛
May 06 Javascript
Vuejs开发环境搭建及热更新【推荐】
Sep 07 Javascript
node.js学习笔记之koa框架和简单爬虫练习
Dec 13 Javascript
一起写一个即插即用的Vue Loading插件实现
Oct 31 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 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
让ThinkPHP支持大小写url地址访问的方法
2014/10/31 PHP
php获取发送给用户的header信息的方法
2015/03/16 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
php+ajax无刷新上传图片实例代码
2015/11/17 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
ionic开发中点击input时键盘自动弹出
2016/12/23 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
[01:04]DOTA2:伟大的Roshan雕塑震撼来临
2015/01/30 DOTA
Python字符编码与函数的基本使用方法
2017/09/30 Python
python3使用pyqt5制作一个超简单浏览器的实例
2017/10/19 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
对python中的pop函数和append函数详解
2018/05/04 Python
12个Python程序员面试必备问题与答案(小结)
2019/06/24 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python迭代器常见用法实例分析
2019/11/22 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Django模板获取field的verbose_name实例
2020/05/19 Python
CSS3 选择器 基本选择器介绍
2012/01/21 HTML / CSS
加拿大购物频道:The Shopping Channel
2016/07/21 全球购物
美国羽绒床上用品第一品牌:Pacific Coast
2018/08/25 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
教师反腐倡廉演讲稿
2014/09/03 职场文书
迎国庆演讲稿
2014/09/15 职场文书
党员评议自我评价
2015/03/03 职场文书
2015年音乐教学工作总结
2015/07/22 职场文书
餐饮行业关注的9大营销策略
2019/08/26 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
Nginx速查手册及常见问题
2022/04/07 Servers
Docker与K8s关系介绍不会Docker也可以使用K8s
2022/06/25 Servers