基于JavaScript实现类名的添加与移除


Posted in Javascript onApril 23, 2017

方法1:使用className属性;

方法2:使用classList API;

//用于匹配类名存在与否
function reg(name){
 return new RegExp('(^|\\s)'+name+'(\\s+|$)');
}
//hasClass addClass removeClass toogleClass
var hasClass,addClass,removeClass;
if('classList' in document.documentElement){
 hasClass=function(obj,cname){
  return obj.classList.contains(cname);
 };
 addClass=function(obj,cname){
  obj.classList.add(cname);
 };
 removeClass=function(obj,cname){
  obj.classList.remove(cname);
 };
 toggleClass=function(obj,cname){
  obj.classList.toggle(cname);
 };
}else{
 hasClass=function(obj,cname){
  return reg(cname).test(obj.className);
 };
 addClass=function(obj,cname){
  if(!hasClass(obj,cname)){
   obj.className=obj.className+' '+cname; 
  }
 };
 removeClass=function(obj,cname){
  obj.className=obj.className.replace(reg(cname),' ');
 };
 toggleClass=function(obj,cname){
  var toggle=hasClass(obj,cname)?removeClass:addClass;
  toggle(obj,cname);
 };
}
//true
document.body.classList.toString() === document.body.className;

注意:这种方法每次只能传一个类名且不能级联操作,而jquery下面的类似操作是可以操作多个类名的。

所以扩展一下:

//addClass
DOMTokenList.prototype.addClass=function(str){
 tts.split(' ').forEach(function(c){
 this.add(c);
 }.bind(this));
 return this;
}
//removeClass
DOMTokenList.prototype.removeClass=function(str){
 tts.split(' ').forEach(function(t){
 this.remove(t);
 }.bind(this));
 return this;
}
//removeClass
DOMTokenList.prototype.toggleClass=function(str){
 tts.split(' ').forEach(function(t){
 this.toggle(t);
 }.bind(this));
 return this;
}

以上所述是小编给大家介绍的JavaScript实现类名的添加与移除方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 浮点运算精度问题分析与解决
Mar 26 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
超详细的javascript数组方法汇总
Nov 21 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
node.js实现爬虫教程
Aug 25 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
基于vue+ bootstrap实现图片上传图片展示功能
May 17 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
Nov 20 Javascript
React四级菜单的实现
Apr 08 Javascript
源码分析Vue.js的监听实现教程
Apr 23 #Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 #Javascript
springMVC + easyui + $.ajaxFileUpload实现文件上传注意事项
Apr 23 #Javascript
Node.js中的require.resolve方法使用简介
Apr 23 #Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 #Javascript
vue拦截器Vue.http.interceptors.push使用详解
Apr 22 #Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 #Javascript
You might like
使用PHP和XSL stylesheets转换XML文档
2006/10/09 PHP
PHP新手上路(九)
2006/10/09 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
jquery插件制作 手风琴Panel效果实现
2012/08/17 Javascript
js获取日期:昨天今天和明天、后天
2014/06/11 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
2015/02/13 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
详解Vue.js入门环境搭建
2017/03/17 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
JS/jQuery实现DIV延时几秒后消失或显示的方法
2018/02/12 jQuery
学习Vue组件实例
2018/04/28 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
2018/08/06 Javascript
js实现简单商品筛选功能
2021/02/02 Javascript
Python实现八大排序算法
2016/08/13 Python
Python 实现文件的全备份和差异备份详解
2016/12/27 Python
python监控linux内存并写入mongodb(推荐)
2017/09/11 Python
python虚拟环境virtualenv的安装与使用
2017/09/21 Python
一篇文章读懂Python赋值与拷贝
2018/04/19 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
django云端留言板实例详解
2019/07/22 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
美国儿童玩具、装扮和玩偶商店:Magic Cabin
2018/09/02 全球购物
电脑专业个人求职信范文
2014/02/04 职场文书
应届中专生自荐书范文
2014/02/13 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
2014年公路养护工作总结
2014/12/04 职场文书
酒桌上的开场白
2015/06/01 职场文书
埃及王子观后感
2015/06/16 职场文书
Spark SQL 2.4.8 操作 Dataframe的两种方式
2021/10/16 SQL Server
在js中修改html body的样式
2021/11/11 Javascript
python DataFrame中stack()方法、unstack()方法和pivot()方法浅析
2022/04/06 Python