原生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中使用inline函数的问题
Mar 08 Javascript
在多个页面使用同一个HTML片段《续》
Mar 04 Javascript
jQuery EasyUI API 中文文档 - Form表单
Oct 06 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
JS+CSS实现自适应选项卡宽度的圆角滑动门效果
Sep 15 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
微信小程序下拉刷新界面的实现
Sep 28 Javascript
微信小程序 input输入及动态设置按钮的实现
Oct 27 Javascript
详解vue的diff算法原理
May 20 Javascript
JavaScript数值类型知识汇总
Nov 17 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
js实现批量删除功能
Aug 27 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
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
Laravel框架实现的上传图片到七牛功能详解
2019/09/06 PHP
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
2013/11/23 Javascript
JS 屏蔽按键效果与改变按键效果的示例代码
2013/12/24 Javascript
什么是JavaScript中的结果值?
2016/10/08 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
Bootstrap响应式导航由768px变成992px的实现代码
2017/06/15 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
js字符串倒序的实例代码
2018/11/30 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
PyTorch线性回归和逻辑回归实战示例
2018/05/22 Python
selenium处理元素定位点击无效问题
2019/06/12 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
python实现人机五子棋
2020/03/25 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
python2.7使用scapy发送syn实例
2020/05/05 Python
伦敦最有品味的百货:Liberty London
2016/11/12 全球购物
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
Maxpeedingrods美国:高性能汽车零件
2020/02/14 全球购物
如何查找网页漏洞
2016/06/22 面试题
交通专业个人自荐信格式
2013/09/23 职场文书
售后服务科岗位职责范文
2013/11/13 职场文书
教师业务学习制度
2014/01/25 职场文书
千手观音观后感
2015/06/03 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
一文搞懂PHP中的抽象类和接口
2022/05/25 PHP