网站专题BANNER

怎么使用HTML5的 classList API操作CSS类

发表日期:2020-07-04 00:15:50 文章编辑:洛壹网络 文章来源:网站开发注意事项

作为前端工程师,我们经常需要根据用户与页面上的元素的交互来更改CSS样式。如果你接触过 jQuery,相信对 hasClass(), addClass(),removeClass() 这些方法不陌生。

幸运的是,HTML5提供了一种原生的方式来实现这些效果,而不再需要jQuery。


目前主流浏览器均已支持 classList API,对于 IE 11之前的版本需要借助于兼容库。

什么是classList API?

HTML5 classList API为我们提供了一种方法来获取一个DOM元素的class属性,并且可以使用JavaScript来修改它们。

在一个元素上查询它的 classList属性会返回一个DOMTokenList集合。它包含了应用于当前元素的所有类,以及length属性,length属性表示该元素上的类的数目。

我们看看这个例子:

怎么使用HTML5的 classList API操作CSS类

在浏览器中执行上述代码,会看到如下输出:

怎么使用HTML5的 classList API操作CSS类

获取一个元素所有的CSS类很简单,但是不是特别有用,我们需要一种方式来管理和更新这些类。classList 提供了几个方法来帮我们实现这些功能:

add():增加指定的类
remove():删除指定的类
contains():检查指定的类是否存在于某个元素中
toggle():切换指定的类
index():返回列表中指定位置的类
length:返回类的数量

让我们逐个了解一下。

增加类

为一个元素增加一个CSS类很简单。只需要把类名作为参数传递到 add() 方法即可。注意如果此类名已经存在于元素上,则不会再次添加。

怎么使用HTML5的 classList API操作CSS类

要增加多个类,以多个参数形式传值:

怎么使用HTML5的 classList API操作CSS类


删除类

要删除一个类,你只需要把类名作为参数传给 remove() 方法即可。如果类名不存在于classList中,则什么都不会发生。

怎么使用HTML5的 classList API操作CSS类

要删除多个类,以多个参数传给 remove方法:

怎么使用HTML5的 classList API操作CSS类

检查一个类是否存在

使用 contains() 方法,可以可以检查一个指定的类是否存在于元素的 classList 中,然后可以根据返回值执行一些操作。

例如:

怎么使用HTML5的 classList API操作CSS类

切换类名

根据用户的行为来增加或者删除一个类,这是一个常见的需求。在 classList API中提供了 toggle() 方法来实现这个功能。

怎么使用HTML5的 classList API操作CSS类

检查类的数量

想要知道有多个类应用到了一个元素上,可以使用 length 属性:

怎么使用HTML5的 classList API操作CSS类

总结

如上所示,HTML5 的 classList 简单易用。如果你的项目不需要兼容旧浏览器,可以根据项目实际情况直接使用 classList API提供的方法,可以简化你的代码。

相关内容
我们
定制
咨询
联系
在线咨询
您的浏览器版本太低

请升级您的浏览器: Internet Explorer11 或以下浏览器: Firefox  /  Chrome  /  360极速浏览器