HTML5 classList API接口

原文地址：HTML5 classList API

原文日期： 2010年07月13日

翻译日期： 2013年08月23日



当我陷入JavaScrip和JavaScript类库框架之中时，我总是有种希望：什么时候浏览器厂商才能用本地代码原生地实现这些由工具类库所提供的方法呢？

我也知道标准的重要性，然而厂商们几乎不可能花大价钱钱仅仅为了实现这些功能。但是我相信他们会，而且是快马加鞭的实现。

好消息当然是其中的一个功能已经被纳入HTML5标准API： classList。



classList对象在HTML5之中被加入到每一个DOM节点内,开发者可以 add,remove和 tooggle(切换，有就移除，没有则添加) 一个节点上的CSS class,开发者还可以检测给定的节点是否包含特定的CSS类。





Element.classList

classList对象包含了很多好用的方法:

length: {具体的包含CSS类的个数}
// add()方法可以添加一个或者多个class,如果是多个，使用空格分开
// 添加("className1 className2 空格分隔")
add: function add() { [native code] }
// 返回 true 或者 false
// 是否包含("className")
contains: function contains() { [native code] }
// 第 n个类名(数字index,0开始)
item: function item() { [native code] }
// remove() 方法允许移除单个class,如果用空格分隔开多个class，那执行结果很可能没有保障。
// 移除("className")
remove: function remove() { [native code] }
// 如果没有则添加，否则移除
// 切换("className")
toggle: function toggle() { [native code] }

如你所见，Element.classList是一个精简且有用的方法集合。



Mozilla Firefox 是当前(2010年7月)唯一支持classList 接口的浏览器。当更多的浏览器支持classList之时，应该使用Javascript库是否包含了classList而不是自己去解析元素的class属性。