之前我们要操作一个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. HBase伪分布式安装(HDFS)+ZooKeeper安装+HBase数据操作+HBase架构体系

    HBase1.2.2伪分布式安装(HDFS)+ZooKeeper-3.4.8安装配置+HBase表和数据操作+HBase的架构体系+单例安装,记录了在Ubuntu下对HBase1.2.2的实践操作,H ...

  2. android的MVP模式

    MVP简介 相信大家对MVC都是比较熟悉了:M-Model-模型.V-View-视图.C-Controller-控制器,MVP作为MVC的演化版本,那么类似的MVP所对应的意义:M-Model-模型. ...

  3. python编写的简单的mysql巡检脚本

    准备工作:1    安装python 3.5,本次使用源码安装.2    安装psutil模块,使用python3.5自带的easy_install包直接运行cd /opt/python3/bin./ ...

  4. Visual Stuio 2010 常用快捷及操作

    1.如果你想复制一行代码(超级长,鼠标拖老久的),只需要在这行的空白处 CTRL+C 同理,剪贴一行 CTRL+X 删除一行 CTRL+L 2.显示方法里的参数,以前每次都是手动删括号. CTRL+S ...

  5. C语言 Include指令(引用头文件)

    #include "one.h" #include "two.h" int main(int argc, const char * argv[]) { one( ...

  6. mongorc.js文件

    当启动的时候,mongo检查用户HOME目录下的一个JavaScript文件.mongorc.js.如果找到,mongo在首次显示提示信息前解析.mongorc.js的内容.如果你使用shell执行一 ...

  7. Android(java)学习笔记32:Android布局详解之一:FrameLayout

    1. FrameLayout是最简单的布局了.所有放在布局里的控件,都按照层次堆叠在屏幕的左上角.后加进来的控件覆盖前面的控件. 在FrameLayout布局里,定义任何空间的位置相关的属性都毫无意义 ...

  8. 【安卓】imageView.scaleType取centerCrop后,再用padding时显示异常?

    imgView.setCropToPadding(true);就可以         

  9. TSP 遗传算法

    GA——遗传算法 同模拟退火算法一样,都是现代优化算法之一.模拟退火是在一定接受程度的情况下仍然接受一个比较差的解. 遗传算法,是真真正正的和大自然的遗传进化有着非常紧密的联系的,当然遗传进化的只是在 ...

  10. Android学习笔记_81_Android ProgressDialog ProgressBar 各种效果

    1,弹出Dialog 屏幕不变暗. 创建一个样式就OK了:在styles.xml文件里添加样式: 1, <style name="dialog" parent="@ ...