原生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 相关文章推荐
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
使弱类型的语言JavaScript变强势
Jun 22 Javascript
jQuery操作 input type=checkbox的实现代码
Jun 14 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
Feb 28 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
谈谈因Vue.js引发关于getter和setter的思考
Dec 02 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
Vue代码分割懒加载的实现方法
Nov 23 Javascript
vue项目动态设置页面title及是否缓存页面的问题
Nov 08 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 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实现带验证码的文件上传功能实例
2014/11/01 PHP
php关闭warning问题的解决方法
2016/05/17 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
Laravel利用gulp如何构建前端资源详解
2018/06/03 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
PHP序列化和反序列化深度剖析实例讲解
2020/12/29 PHP
js用闭包遍历树状数组的方法
2014/03/19 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
javascript原型链继承用法实例分析
2015/01/28 Javascript
使用jQuery获得内容以及内容的属性
2015/02/26 Javascript
纯javascript实现的小游戏《Flappy Pig》实例
2015/07/27 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
AngularJS+Node.js实现在线聊天室
2015/08/28 Javascript
Bootstrap模块dropdown实现下拉框响应
2016/05/22 Javascript
如何以Angular的姿势打开Font-Awesome详解
2018/04/22 Javascript
修改node.js默认的npm安装目录实例
2018/05/15 Javascript
详解vue中使用vue-quill-editor富文本小结(图片上传)
2019/04/24 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
python+opencv实现阈值分割
2018/12/26 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
对PyQt5的输入对话框使用(QInputDialog)详解
2019/06/25 Python
在Django中实现添加user到group并查看
2019/11/18 Python
centos7中安装python3.6.4的教程
2019/12/11 Python
详解python opencv、scikit-image和PIL图像处理库比较
2019/12/26 Python
python实现加密的方式总结
2020/01/19 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
python 瀑布线指标编写实例
2020/06/03 Python
彪马日本官网:PUMA日本
2019/01/31 全球购物
纺织工程专业推荐信
2014/09/08 职场文书
销售人才自我评价范文
2014/09/27 职场文书
2015年员工工作总结范文
2015/04/08 职场文书
搞笑欢迎词大全
2015/09/30 职场文书
使用pytorch实现线性回归
2021/04/11 Python