Element.classList属性
2017-08-04 10:51
197 查看
Element.classList是一个只读属性,它返回元素的类名,作为DOMTokenList对象,该元素用于在元素中添加,移除及切换CSS类。
对于jQuery里的hasClass、addClass、removeClass方法我们再熟悉不过了,但我们并不是在每个项目中都会去使用jQuery。在原生js中,classList可以方便的对元素的类名进行增删改查,它的构造器是DOMTokenList,提供了以下API供使用,包括length属性,item,contains,add,remove和toggle方法。
remove( String [,String] ) : 删除指定的类,其中移除一个不存在的类,不会报错
toggle ( String [, true | false] ) : 当只有一个参数时,切换类名;当存在第二个参数时:如果为true,则添加指定的类值,如果为false,则删除它
item(number) : 按集合中的索引返回类值,索引值从0开始,索引值在区间外则返回null
contains(String) : 返回布尔值,检查元素的类属性中是否存在指定的类值
![](https://img-blog.csdn.net/20170804103234523?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGV2aW5oYXg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
![](https://img-blog.csdn.net/20170804104648075?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGV2aW5oYXg=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
该文章同步在 :
简书 : https://www.jianshu.com/users/63adfe13324c/timeline
GitHub Page : https://levinhax.github.io/
对于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/
相关文章推荐
- element.classList属性及方法应用
- classList属性
- HTML5新特性:元素的classList属性与应用
- DOM对象的classList对象属性介绍与用法
- HTML5实战与剖析之classList属性
- HTML5实战与剖析之classList属性
- 如何去List<实体>里面实体某个属性相同的数据public class A{ public string Name { get; set; } public string Age { get; se
- 脚本化CSS类-HTML5 classList属性
- HTML5新特性-元素的classList属性与应用
- 用HTMLDocumentClass分析Html代码(以及读取HtmlElement所有属性方法)
- HTML5: element.classList API实例:简易样式控切换按钮
- javascript高级程序设计---classList属性
- HTML5: element.classList API实例:简易样式控切换按钮
- DOM 的classList 属性
- 运行时简单使用-->获取对象的属性(class_copyIvarList)
- html元素是否包含另外一个元素,以及classList属性
- HTML5基础加强css样式篇(DOM的属性操作(对class属性值的操作 setAttribute,removeAttribute,classlist:remove,add,toggle))(七)
- html5的classList属性介绍和原生js实现jQuery的addClass,removeClass,hasClass方法
- 用HTMLDocumentClass分析Html代码(以及读取HtmlElement所有属性方法)
- HTML5实战与剖析之classList属性