使用 classList API
一、classList API 是什么
- 属于 DOM API,HTML5 引入,用来操作 HTML 标签的
class
属性值。 classList
属性是一个只读的类数组对象,“实时”地代表了元素的类名集合。classList
对象上定义了 6 个实用的操作class
属性值的方法。
二、classList
对象上的属性和方法
属性:
length
:返回当前类列表中类的个数。
方法:
add(class1, class2, ...)
:添加类remove(class1, class2, ...)
:删除类toggle(class[, force])
:当前类列表中如果不存在指定的类,则执行添加类操作,返回true
;否则执行删除类操作,返回false
。force 是一个函数,决定toggle
方法最终执行何种操作——当函数返回true
时,执行添加类操作,返回false
,执行删除类操作。contains(class)
:是否包含指定类。item(index)
:返回当前类列表中指定位置的类名。toString()
:返回当前类列表的字符串表示。
接下来会举些使用上述方法和属性的例子(这里有一个 线上的例子 ),这些例子都会用到下面这段 HTML 代码。
<span id="element" class="description"></span>
2.1 add()
方法
添加一个类名:
document.getElementById('element').classList.add('red');
// class="description red"
添加多个类名:
document.getElementById('element').classList.add('red', 'bold');
// class="description red bold"
{提示} 如果提供的类名已存在,就不会重复添加。
2.2 remove()
方法
删除一个类名:
document.getElementById('element').classList.remove('description');
// class=""
删除多个类名:
document.getElementById('element').classList.remove('description', 'red');
// class=""
2.3 toggle()
方法
document.getElementById('element').classList.toggle('description');
// class=""
document.getElementById('element').classList.toggle('description');
// class="description"
2.4 item()
方法
document.getElementById('element').classList.item(0);
// 返回 "description"
document.getElementById('element').classList.item(2);
// 返回 null
2.5 contains
方法
if (document.getElementById('element').classList.contains('description')) {
// 一些逻辑代码……
} else {
// 不同的逻辑代码……
}
2.6 toString()
方法
console.log(document.getElementById('element').classList.toString());
// 打印 "description"
document.getElementById('element').classList.add('red', 'bold');
console.log(document.getElementById('element').classList.toString());
// 打印 "description red bold"
2.7 length
属性
console.log(document.getElementById('element').classList.length);
// 打印 1
浏览器兼容性
IE10+ 和其他所有浏览器。其中 IE10+(包括土鳖 UC)属于部分支持,不支持的内容包括:
- 不支持 SVG 或 MathML 元素。
- 不支持
toggle
方法的第二个参数。 - 不支持多参数形式的
add()
和remove()
方法。
不过都是小事,可以使用 polyfill 解决。
参考链接
https://www.sitepoint.com/exploring-classlist-api/
(完)
使用 classList API的更多相关文章
- [Javascript] Manipulate the DOM with the classList API
Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than u ...
- HTML5 classList API接口
原文地址:HTML5 classList API 原文日期: 2010年07月13日 翻译日期: 2013年08月23日 当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望 ...
- 温习classList api
有道题是一个removeClass的功能,代码里是正则分隔了传入的name,根据name的个数,循环移除掉,让寻找bug..看了了这几行代码,首先想到的是我会如何去优化. 如果看代码一两分钟就能找到公 ...
- HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- [转]HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- HTML5的classList API优化对样式名className的操作
//添加一个class elem.classList.add(classname); //删除一个class elem.classList.remove(classname); //判断一个class ...
- element.dataset API
不久之前我向大家展示了非常有用的classList API,它是一种HTML5里提供的原生的对页面元素的CSS类进行增.删改的接口,完全可以替代jQuery里的那些CSS类操作方法.而另外一个非常有用 ...
- H5新增属性classList
H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...
- h5的classList对象
H5新增属性classList h5中新增了一个classList,原生js可以通过它来判断获取dom节点有无某个class. classList是html元素对象的成员,它的使用非常简单,比如 co ...
随机推荐
- 每天一个linux命令(16):tail命令
版权声明更新:2017-05-20博主:LuckyAlan联系:liuwenvip163@163.com声明:吃水不忘挖井人,转载请注明出处! 1 文章介绍 本文介绍了Linux下面的mv命令. 2. ...
- [BZOJ5248][多省联测2018]双木棋chess
bzoj luogu sol 首先,要保证一个格子的左边和上方都放满了棋子,就需要这个点的左上方那个矩形都放满了棋子. 这样放棋子状态就会是一个自左下至右上的轮廓线. 状态数?\(C_{20}^{10 ...
- 浅析BMP位图文件结构(含Demo)
浅析BMP位图文件结构(含Demo) 作者:一点一滴的Beer http://beer.cnblogs.com/ 关于BMP位图格式在网上可以找到比较详细的相关文档,有兴趣的可以搜索标题为“BMP ...
- div+css制作带箭头提示框效果图(原创文章)
一直都在看站友们的作品,今天也来给大家分享一个小的效果,第一次发还有点小紧张呢,语言表达能力不是很好,还请见谅…^ 先来个简单点的吧,上效果图 刚开始在网上看到效果图的时候感觉好神奇,当我试着写出来的 ...
- Spring Boot 集成RabbitMQ
在Spring Boot中整合RabbitMQ是非常容易的,通过在Spring Boot应用中整合RabbitMQ,实现一个简单的发送.接收消息的例子. 首先需要启动RabbitMQ服务,并且add一 ...
- Java-API-Package:org.springframework.stereotype
ylbtech-Java-API-Package:org.springframework.stereotype 1.返回顶部 1. @NonNullApi @NonNullFields Package ...
- 修改crushmap实验
标签(空格分隔): ceph,ceph实验,crushmap CRUSH的全称是Controlled Replication Under Scalable Hashing,是ceph数据存储的分布式选 ...
- centos软件安装目录(amp目录)
entos安装软件的目录 1. 如果是rpm安装的可以:rpm -ql package-name 2. 可以在根目录上直接find . -name 软件中的某个文件名 不过安装软件一般都在/usr/l ...
- spring与struts有什么区别?
Struts只是一个MVC框架(Framework),用于快速开发Java Web应用.Struts实现的重点在C(Controller),包括ActionServlet/RequestProcess ...
- DDD学习笔录——领域驱动设计DDD概念总结