element.classList属性及方法应用
2012-10-24 17:43
507 查看
element.classList属性用于返回一个元素的className集合,并且该属性拥有add,remove,toggle,contains方法,详见:https://developer.mozilla.org/en-US/docs/DOM/element.classList。
一般我们再操作dom节点的className时经常会有以下4个需求:
判断该节点是否存在某个className
移除某个节点上的指定className
为某个节点添加指定的className
在某个节点上进行指定的两个或多个className的切换
对于以上4个功能需求我们以前的做法一般是利用正则表达式进行匹配,匹配成功后进行替换,移除等操作,但目前对于firefox3.6、chrome8等高级浏览器已经支持element.classList属性及相应方法,所以可以改进以上4种需求的实现。
对于某个节点上是否存在某个className的判断方法hasClassName():
2. 移除某个节点上指定的className,removeClassName():
一般我们再操作dom节点的className时经常会有以下4个需求:
判断该节点是否存在某个className
移除某个节点上的指定className
为某个节点添加指定的className
在某个节点上进行指定的两个或多个className的切换
对于以上4个功能需求我们以前的做法一般是利用正则表达式进行匹配,匹配成功后进行替换,移除等操作,但目前对于firefox3.6、chrome8等高级浏览器已经支持element.classList属性及相应方法,所以可以改进以上4种需求的实现。
对于某个节点上是否存在某个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); } } };
相关文章推荐
- class_copyPropertyList与class_copyIvarList区别,获取属性,使用runtime方法的注意事项
- HTML5新特性-元素的classList属性与应用
- html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
- HTML5新特性:元素的classList属性与应用
- 用HTMLDocumentClass分析Html代码(以及读取HtmlElement所有属性方法)
- 用HTMLDocumentClass分析Html代码(以及读取HtmlElement所有属性方法)
- HTML5新特性:元素的classList属性与应用
- Element.classList属性
- HTML5新特性-元素的classList属性与应用
- 用HTMLDocumentClass分析Html代码(以及读取HtmlElement所有属性方法)
- 解决element-ui中el-menu组件作为vue-router模式在刷新页面后default-active属性与当前路由页面不一致问题的方法
- HTML5实战与剖析之classList属性
- location对象的属性和方法应用(解析URL)
- java.lang.ClassNotFoundException: org.apache.commons.collections.map.ListOrderedMap解决方法
- java中如何通过Class获取类的属性、方法、注释
- Spring中使用Map、Set、List、数组、属性集合的注入方法配置文件
- Get Custom Attribute on frontend list page and cart page(列表页获取自定义属性的三种方法)
- HTML DOM classList属性
- Android控件之EditView常用属性及应用方法
- iPone应用开发 UIView 常用属性和方法