原生javascript实现addClass,removeClass,hasClass函数


Posted in Javascript onFebruary 25, 2016

原生的addClass, removeClass, hasClass函数,未使用jquery

class.js

function hasClass(ele,cls) {
  return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
 
function addClass(ele,cls) {
  if (!this.hasClass(ele,cls)) ele.className += " "+cls;
}
 
function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}
 
//call the functions
addClass(document.getElementById("test"), "test");
removeClass(document.getElementById("test"), "test")
if(hasClass(document.getElementById("test"), "test")){//do something};
Javascript 相关文章推荐
javascript 3d 逐侦产品展示(核心精简)
Mar 26 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
Oct 31 Javascript
Vue.js基础知识汇总
Apr 27 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
JS实现改变HTML上文字颜色和内容的方法
Dec 30 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
JS+CSS实现网页加载中的动画效果
Oct 27 Javascript
jQuery滑动效果实现方法分析
Sep 05 jQuery
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 Javascript
在Express中提供静态文件的实现方法
Oct 17 Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 Javascript
javascript随机抽取0-100之间不重复的10个数
Feb 25 #Javascript
JavaScript实现多种排序算法
Feb 24 #Javascript
JavaScript中的时间处理小结
Feb 24 #Javascript
JS设置cookie、读取cookie
Feb 24 #Javascript
jquery form表单获取内容以及绑定数据
Feb 24 #Javascript
javascript cookie的简单应用
Feb 24 #Javascript
javascript的正则匹配方法学习
Feb 24 #Javascript
You might like
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
浅谈COOKIE和SESSION区别
2015/07/19 PHP
Yii2 如何在modules中添加验证码的方法
2017/06/19 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
PHP获取当前时间不准确问题解决方案
2020/08/14 PHP
js中判断控件是否存在
2010/08/25 Javascript
js中的this关键字详解
2013/09/25 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
node.js使用cluster实现多进程
2016/03/17 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
nodejs入门教程四:URL相关模块用法分析
2017/04/24 NodeJs
jQuery上传插件webupload使用方法
2017/08/01 jQuery
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
2018/07/03 Javascript
详解关于Vuex的action传入多个参数的问题
2019/02/22 Javascript
世界上最短的数字判断js代码
2019/09/09 Javascript
vue+element表格导出为Excel文件
2019/09/26 Javascript
在vscode 中设置 vue模板内容的方法
2020/09/02 Javascript
解决vue初始化项目一直停在downloading template的问题
2020/11/09 Javascript
vue3.0实现插件封装
2020/12/14 Vue.js
Python 使用with上下文实现计时功能
2018/03/09 Python
python 堆和优先队列的使用详解
2019/03/05 Python
python双端队列原理、实现与使用方法分析
2019/11/27 Python
python psutil监控进程实例
2019/12/17 Python
tensorflow之并行读入数据详解
2020/02/05 Python
使用Python爬虫爬取小红书完完整整的全过程
2021/01/19 Python
照片礼物和装饰:MyPhoto
2019/11/02 全球购物
公司营业员的自我评价
2014/03/04 职场文书
2014年党的群众路线教育实践活动整改措施(个人版)
2014/09/25 职场文书
个人工作表现自我评价
2015/03/06 职场文书
2015年底工作总结范文
2015/05/15 职场文书
初中数学教学反思范文
2016/02/17 职场文书
家电创业计划书
2019/08/05 职场文书
Python - 10行代码集2000张美女图
2021/05/23 Python