Element.classList

H5新增了一种操作类名的方法,classList,这个属性是新集合类型DOMTokenList的实例。
Element.classList 是一个只读属性,返回一个元素的类属性的实时 DOMTokenList
集合。
使用 **classList **是一个方便的替代方法,通过element.className
作为空格分隔的字符串访问元素的类列表。

方法

  • add( String [, String] )
    添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
  • remove( String [,String] )
    删除指定的类值。
  • item ( Number )
    按集合中的索引返回类值。
  • toggle ( String [, force] )
    当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
    当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
  • contains( String )
    检查元素的类属性中是否存在指定的类值。

示例

// div是具有class =“foo bar”的<div>元素的对象引用
div.classList.remove("foo");
div.classList.add("anotherclass");

// 如果visible被设置则删除它,否则添加它
div.classList.toggle("visible");

// 添加/删除 visible,取决于测试条件,i小于10
div.classList.toggle("visible", i < 10);

alert(div.classList.contains("foo"));

//添加或删除多个类
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Element.classList是一个只读属性,它返回元素的类名,作为DOMTokenList对象,该元素用于在...
    levinhax阅读 1,225评论 1 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • 国家电网公司企业标准(Q/GDW)- 面向对象的用电信息数据交换协议 - 报批稿:20170802 前言: 排版 ...
    庭说阅读 11,211评论 6 13
  • 江山美如娇,英雄竞折腰。 借天五百年,易我太平谣。
    水和hobe123阅读 383评论 0 2
  • 平常我们看到的信息,和观点不一定真实,正确。要有怀疑精神,有自己的思想和主见,时刻反思,才不会人云亦云。
    斐丽希娅阅读 189评论 0 0