之前我们要操作一个DOM元素的class属性,需要对这个DOM的class进行繁琐的循环判断,而现在HTML5为每个元素定义了classLlist属性,用于在元素中添加,移除及切换 CSS 类。该属性是 DOMTokenList 对象(一个只读的类数组对象),你可以通过DOMTokenList定义的方法对其进行修改。

支持classList属性的浏览器版本:

语法:element.classList

方法:

add(class1, class2, ...): 在元素中添加一个或多个类名, 如果指定的类名已存在,则不会添加

contains(class): 返回布尔值,判断指定的类名是否存在

item(index): 返回类名在元素中的索引值, 索引值从 0 开始, 如果索引值在区间范围外则返回 null

remove(class1, class2, ...): 移除元素中一个或多个类名, 注意: 移除不存在的类名,不会报错

toggle(class, true|false): 在元素中切换类名

           第一个参数为要在元素中移除的类名,并返回 false。如果该类名不存在则会在元素中添加类名,并返回 true

           第二个是可选参数,是个布尔值用于设置元素是否强制添加或移除类,不管该类名是否存在

classList属性详解的更多相关文章

  1. android:exported 属性详解

    属性详解 标签: android 2015-06-11 17:47 27940人阅读 评论(7) 收藏 举报 分类: Android(95) 项目点滴(25) 昨天在用360扫描应用漏洞时,扫描结果, ...

  2. OutputCache属性详解(一)一Duration、VaryByParam

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  3. OutputCache属性详解(二)一 Location

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  4. OutputCache属性详解(三)— VaryByHeader,VaryByCustom

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  5. OutputCache属性详解(四)— SqlDependency

    目录 OutputCache概念学习 OutputCache属性详解(一) OutputCache属性详解(二) OutputCache属性详解(三) OutputCache属性详解(四)— SqlD ...

  6. WPF依赖属性详解

    WPF依赖属性详解 WPF 依赖属性 英文译为 Dependency Properties,是WPF引入的一种新类型的属性,在WPF中有着极为广泛的应用,在WPF中对于WPF Dependency P ...

  7. HTML video 视频标签全属性详解

    HTML 5 video 视频标签全属性详解   现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...

  8. Android组件---四大布局的属性详解

    [声明] 欢迎转载,但请保留文章原始出处→_→ 文章来源:http://www.cnblogs.com/smyhvae/p/4372222.html Android常见布局有下面几种: LinearL ...

  9. dede的pagelist标签的listsize数字属性详解(借鉴)

    dede的pagelist标签的listsize数字属性详解.见远seo经常用织梦搭建各种网站,有次发现列表页面的分页显示超过div的界限,也就是溢出了或者说是撑破了.后来经过研究发现是pagelis ...

随机推荐

  1. wxpython Menus and toolbars

    Menus and toolbars A common part in a GUI application is a menubar. A menubar consists of objects ca ...

  2. python加解密

    from Crypto.Cipher import AES import base64 secret_key = '1234567890123456' # 密匙 msg_text = 'test so ...

  3. python多重继承

    # 动物 Dog - 狗狗: Bat - 蝙蝠: Parrot - 鹦鹉: Ostrich - 鸵鸟. # 哺乳动物 鸟类 # 能跑 能飞 class Animal(object): pass # 大 ...

  4. spring的开发

    spring与web的整合 1. 整合的原理: Spring容器随着tomcat容器ServletContext的启动而启动,并且在初始化完成后放到整个应用都可以访问的范围. ApplicationC ...

  5. javascript 面向对象(实现继承的几种方式)

     1.原型链继承 核心: 将父类的实例作为子类的原型 缺点:  父类新增原型方法/原型属性,子类都能访问到,父类一变其它的都变了 function Person (name) { this.name ...

  6. javascript Object与Array用法

    引用类型:引用类型是一种数据结构,用于将数据和功能组织在一起.引用类型的值是引用类型的一个实例. 一.Object ECMAScript中的对象其实就是一组数据和功能的结合. Object类型其实是所 ...

  7. makefile中的循环控制

    GNU make的foreach函数 foreach函数仅GNU make支持: 下面的代码中使用了函数foreach和shell files=main.exe a.exe b.exe all: ec ...

  8. 一点一点学写Makefile(6)-遍历当前目录源文件及其子目录下源文件

    时候,我们在开发的时候需要将本次工程的代码分成多个子目录来编写,但是在Makefile的编写上却是个问题,下面我就教大家怎么构建带有子文件夹的源代码目录的自动扫描编译 下面这张图是我的文件树 这里面s ...

  9. 在linux代码中打印函数调用的堆栈的方法

    之前一直有这样的需求,当时问到,也没搜到方法,现在竟然既问到了,也搜到了,哎,世事真是不能强求啊! 在Linux内核调试中,经常用到的打印函数调用堆栈的方法非常简单,只需在需要查看堆栈的函数中加入: ...

  10. apache ab 测试 apr_socket_connect(): 由于目标机器积极拒绝 无法连接

    遇到这种情况一般是你开的并行数量太多了...例如:ab -c 1000 -n 10000 http://localhost/index.html 如此大的请求就会挂掉,不过还是有补救措施的,可以通过增 ...