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

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

  其实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);     } }

 

转载于:https://www.cnblogs.com/goloving/p/9071763.html

你可能感兴趣的文章
算法时间复杂度
查看>>
二叉树的遍历 - 数据结构和算法46
查看>>
类模板 - C++快速入门45
查看>>
[转载]JDK的动态代理深入解析(Proxy,InvocationHandler)
查看>>
centos7 搭建vsftp服务器
查看>>
RijndaelManaged 加密
查看>>
Android 音量调节
查看>>
HTML&CSS基础学习笔记1.28-给网页添加一个css样式
查看>>
windows上面链接使用linux上面的docker daemon
查看>>
Redis事务
查看>>
Web框架和Django基础
查看>>
python中的逻辑操作符
查看>>
CSS兼容性常见问题总结
查看>>
HDU 1548 A strange lift (Dijkstra)
查看>>
每天一个小程序—0005题(批量处理图片大小)
查看>>
C# 启动进程和杀死进程
查看>>
tcp实现交互
查看>>
IIS的各种身份验证详细测试
查看>>
JavaScript特效源码(3、菜单特效)
查看>>
聊聊、Zookeeper Linux 单服务
查看>>