博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
阅读量:6242 次
发布时间:2019-06-22

本文共 850 字,大约阅读时间需要 2 分钟。

  其实html5已经扩展了class操作的相关API,其中classList属性就以及实现了class的增删和判断。

  classList属性的方法有:

add(value) 添加类名,如果有则不添加

contains(value) 判断是否存在类名,返回Boolean值

remove(value) 从列表中删除类名

toggle(value) 切换类名:如果列表中存在则删除,否则添加

  为了更好的兼容性,我们可以自己手动实现这几个方法。 这里利用了DOM属性 className,我们始终是在操作这个对象。

function hasClass( elements,cName ){   return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; function addClass( elements,cName ){   if( !hasClass( elements,cName ) ){     elements.className += " " + cName;   }; }; function removeClass( elements,cName ){   if( hasClass( elements,cName ) ){     elements.className = elements.className.replace( new RegExp( "(\\s|^)" + cName + "(\\s|$)" ), " " );  }; };
//如果存在(不存在),就删除(添加)一个样式function toggleClass(ele,cls){     if(hasClass(ele,cls)){         removeClass(ele, cls);     }else{         addClass(ele, cls);     } }

 

转载地址:http://xrsia.baihongyu.com/

你可能感兴趣的文章
mybatis 为什么每次插入的时候总会创建一个SqlSession?
查看>>
Vue 教程第十六篇—— Vuex 之 action
查看>>
javaScript旋转Base64图片并得到新的base64数据
查看>>
使用opennlp自定义命名实体
查看>>
浅析k8s service的应用
查看>>
Node.js性能分析神器Easy-Monitor
查看>>
css基础—字体那些事
查看>>
性能优化之MySQL调优篇
查看>>
Angular开发实践(七): 跨平台操作DOM及渲染器Renderer2
查看>>
Laravel 教程 - 实战 iBrand 开源电商 API 系统
查看>>
vue-cli的坑,loader重复的锅 Invalid CSS after "...load the styles"
查看>>
手写Spring之IOC基于xml动态创建对象
查看>>
聊聊reactive streams的tranform操作
查看>>
箭头函数与this
查看>>
Angular4学习笔记之DOM属性绑定
查看>>
java构造list,合并重复的数组
查看>>
紫书第四章例4-4信息解码Message Decoding (处理二进制字符的一种典型例题)
查看>>
一些杂感杂想(三)打理业余时间的一点个人心得
查看>>
Apache Kylin安装部署
查看>>
JavaScript的async 的学习
查看>>