Element.classList属性
来源:互联网 发布:linux的图形界面工具 编辑:程序博客网 时间:2024/06/07 03:28
Element.classList是一个只读属性,它返回元素的类名,作为DOMTokenList对象,该元素用于在元素中添加,移除及切换CSS类。
对于jQuery里的hasClass、addClass、removeClass方法我们再熟悉不过了,但我们并不是在每个项目中都会去使用jQuery。在原生js中,classList可以方便的对元素的类名进行增删改查,它的构造器是DOMTokenList,提供了以下API供使用,包括length属性,item,contains,add,remove和toggle方法。
成员介绍 :
属性 :
length : 只读属性,返回一个整数,表示类列表中类的数量
方法 :
add( String [, String] ) : 添加指定的类,如果该类已存在,则会被忽略
remove( String [,String] ) : 删除指定的类,其中移除一个不存在的类,不会报错
toggle ( String [, true | false] ) : 当只有一个参数时,切换类名;当存在第二个参数时:如果为true,则添加指定的类值,如果为false,则删除它
item(number) : 按集合中的索引返回类值,索引值从0开始,索引值在区间外则返回null
contains(String) : 返回布尔值,检查元素的类属性中是否存在指定的类值
浏览器兼容性 :
实例 :
<div id="root"> 这是一段文字</div>
#root{ width: 400px; height: 50px; text-align: center; padding: 15px; border: 1px solid #000; } .firstClass{ color : red; } .secondClass{ background-color: blue; }
window.onload = function(){ document.getElementById("root").classList.add("firstClass","secondClass"); }
该文章同步在 :
简书 : https://www.jianshu.com/users/63adfe13324c/timeline
GitHub Page : https://levinhax.github.io/
阅读全文
0 0
- Element.classList属性
- element.classList属性及方法应用
- javascript高级程序设计---classList属性
- classList
- classList
- HTML5实战与剖析之classList属性
- HTML5: element.classList API实例:简易样式控切换按钮
- IE 10以前的版本兼容 document element 的classList
- 给不支持classList的浏览器(ie9以及以下等)的元素添加classList属性
- DOM对象的classList对象属性介绍与用法
- html元素是否包含另外一个元素,以及classList属性
- HTML5新特性-元素的classList属性与应用
- HTML5新特性-元素的classList属性与应用
- classList API
- element元素结点属性
- 12. Element attributes 属性
- 13. Element childNodes 属性
- 14. Element className 属性
- English in July
- volley常用网络请求方式GET与POST请求
- HDU
- 简析TCP的三次握手与四次分手
- H.264编码原理以及I帧B帧P帧
- Element.classList属性
- Blockchain的鱼和熊掌系列(22) 之基于CUDA的客户端哈希并行化处理示例
- easyui-tree的json字符串结构(1层、2层、3层、4层)
- TP5.0.3-OUR中德双语网站的总结
- 【SQL】更新oracle数据库中的时间为表中当前时间之前的一个小时,5个小时
- 自定义控件(10)数据回传IPostBackDataHandler
- win10共享文件
- poj2104 K-th Number
- 阻止默认事件行为和事件冒泡