基于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 相关文章推荐
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
asm.js使用示例代码
Nov 28 Javascript
js过滤特殊字符输入适合输入、粘贴、拖拽多种情况
Mar 22 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
浅谈页面装载js及性能分析方法
Dec 09 Javascript
浅谈javascript中new操作符的原理
Jun 07 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
JS实现移动端实时监听输入框变化的实例代码
Apr 12 Javascript
深入理解vue-loader如何使用
Jun 06 Javascript
element-ui的回调函数Events的用法详解
Oct 16 Javascript
vue router 传参获取不到的解决方式
Nov 13 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 字符串 小常识
2009/06/05 PHP
PHP图片等比缩放类SimpleImage使用方法和使用实例分享
2014/04/10 PHP
php图像处理类实例
2015/07/28 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
PHP实现可精确验证身份证号码的工具类示例
2018/05/31 PHP
PDO::setAttribute讲解
2019/01/29 PHP
Js 中debug方式
2010/02/07 Javascript
javascript面向对象之Javascript 继承
2010/05/04 Javascript
jQuery获取DOM节点实例分析(2种方式)
2015/12/15 Javascript
jquery及js实现动态加载js文件的方法
2016/01/21 Javascript
docker中编译nodejs并使用nginx启动
2017/06/23 NodeJs
JS库之ParticlesJS使用简介
2017/09/12 Javascript
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
vue路由守卫,限制前端页面访问权限的例子
2019/11/11 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
python数据结构之链表的实例讲解
2017/07/25 Python
tensorflow建立一个简单的神经网络的方法
2018/02/10 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
python+selenium实现自动抢票功能实例代码
2018/11/23 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
Linux机考试题
2015/10/16 面试题
final, finally, finalize的区别
2012/03/01 面试题
学生期末评语大全
2014/04/30 职场文书
艺术设计专业毕业生推荐信
2014/07/08 职场文书
民间个人借款协议书
2014/09/30 职场文书
2014保险公司内勤工作总结
2014/12/16 职场文书
民间借贷被告代理词
2015/05/23 职场文书
Python使用UDP实现720p视频传输的操作
2021/04/24 Python
go语言中切片与内存复制 memcpy 的实现操作
2021/04/27 Golang
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫