element.classList属性及方法应用
来源:互联网 发布:莆田淘宝美工培训 编辑:程序博客网 时间:2024/06/11 12:10
element.classList属性用于返回一个元素的className集合,并且该属性拥有add,remove,toggle,contains方法,详见:https://developer.mozilla.org/en-US/docs/DOM/element.classList。
一般我们再操作dom节点的className时经常会有以下4个需求:
- 判断该节点是否存在某个className
- 移除某个节点上的指定className
- 为某个节点添加指定的className
- 在某个节点上进行指定的两个或多个className的切换
- 对于某个节点上是否存在某个className的判断方法hasClassName():
dom.hasClassName = function(node, classname) { var cn = node.className; if(classname && node.classList && node.classList.contains){ //浏览器特性判断是否支持classList及对应的contains方法 return node.classList.contains(classname); }else{//对于不支持classList及对应的contains方法使用indexOf进行字符窜匹配 if( (' '+cn+' ').indexOf(' '+classname+' ')===-1 ){ return false; }else{ return true; } } };
2. 移除某个节点上指定的className,removeClassName():
dom.removeClassName = function (node, _className){ var obj = node; if(_className && obj && obj.classList && obj.classList.remove){//浏览器特性判断是否支持classList及对应的remove方法 obj.classList.remove(_className); }else{ obj.className = obj.className.replace(new RegExp("\\b" + _className + "\\b"), ""); } };3.为某个节点添加指定的className
dom.addClassName = function(node, className) { var cn = node.className; if(className && node && node.classList && node.classList.add){//浏览器特性判断是否支持classList及对应的add方法 node.classList.add(className); }else{ if( (' '+cn+' ').indexOf(' '+className+' ')===-1 ){ node.className = cn+' '+className; } } };4.在某个节点上进行指定的两个或多个className的切换
dom.toggle = function(node,className){ node = $E(node) || node; var classList = node.classList; if(typeof className === "undefined" || className === ""){//当没有传递className参数时,做hidden和show的切换 if(node.style.display !== 'none'){ node.style.display = 'none'; }else{ node.style.display = ''; } return; } if(classList && classList.toggle){//传递了className参数时做浏览器特性判断,判断是否支持classList及对应的toggle方法 node.classList.toggle(className); }else{ if(dom.hasClassName(node,className)){ dom.removeClassName(node,className); }else{ dom.addClassName(node,className); } } };
- element.classList属性及方法应用
- Element.classList属性
- HTML5新特性-元素的classList属性与应用
- HTML5新特性-元素的classList属性与应用
- javascript高级程序设计---classList属性
- classList
- classList
- HTML5实战与剖析之classList属性
- HTML5: element.classList API实例:简易样式控切换按钮
- IE 10以前的版本兼容 document element 的classList
- javascript:window属性方法详细应用及方法实例
- Element属性方法的浏览器兼容性概览
- js DOM Element属性和方法整理
- 给不支持classList的浏览器(ie9以及以下等)的元素添加classList属性
- android 各种控件方法及属性的应用
- JS中定义类及属性方法应用格式
- VB中WinSock控件的属性、方法、事件及应用
- js-DOM、BOM相关方法及属性的应用
- KVM小结
- 在Ubuntu上为Android系统编写Linux内核驱动程序
- WLAN用户接入流程
- js数组与字符串相互转换
- Keil:Source Browse的使用
- element.classList属性及方法应用
- MDDI接口简单了解
- MySQL的mysqldump的基本用法
- sgu 107 987654321 problem
- 《TCP/IP详解-协议》(14)DNS
- 在Ubuntu上为Android系统内置C可执行程序测试Linux内核驱动程序
- 使用PhoneGap制作基于HTML5的跨平台应用和游戏1 – PhoneGap简介
- 在Ubuntu上为Android增加硬件抽象层(HAL)模块访问Linux内核驱动程序
- 桌面添加数据库链接测试test.udl后缀为udl即可