原生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 Select标记中options操作方法集合
Oct 22 Javascript
JavaScript 自动分号插入(JavaScript synat:auto semicolon insertion)
Nov 04 Javascript
js跳转页面方法总结
Jan 29 Javascript
jquery操作select方法汇总
Feb 05 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
May 18 Javascript
浅析jQuery操作select控件的取值和设值
Dec 07 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
Vue数字输入框组件示例代码详解
Jan 15 Javascript
JQuery实现折叠式菜单的详细代码
Jun 03 jQuery
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反转字符串函数strrev()函数的用法
2012/02/04 PHP
php curl简单采集图片生成base64编码(并附curl函数参数说明)
2019/02/15 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
2013/08/15 Javascript
jquery next nextAll nextUntil siblings的区别介绍
2013/10/05 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
2014/11/02 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
2016/06/22 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JS实现上传图片的三种方法并实现预览图片功能
2017/07/14 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
2017/08/07 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
jquery.picsign图片标注组件实例详解
2018/02/02 jQuery
微信小程序自定义组件之可清除的input组件
2018/07/17 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
Vue中util的工具函数实例详解
2019/07/08 Javascript
vue获取验证码倒计时组件
2019/08/26 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
2020/07/27 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
JavaScript用document.write()输出换行的示例代码
2020/11/26 Javascript
vue 动态创建组件的两种方法
2020/12/31 Vue.js
Python多线程实例教程
2014/09/06 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python读取数据集并消除数据中的空行方法
2018/07/12 Python
python读取图片的几种方式及图像宽和高的存储顺序
2020/02/11 Python
python GUI库图形界面开发之PyQt5单选按钮控件QRadioButton详细使用方法与实例
2020/02/28 Python
python shell命令行中import多层目录下的模块操作
2020/03/09 Python
英国探险旅游专家:Explore
2018/12/20 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
教导处工作制度
2014/01/18 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
村主任“四风”问题个人整改措施
2014/10/04 职场文书
Nginx动静分离配置实现与说明
2022/04/07 Servers