在 JavaScript 和 JavaScript 工具库里征战多年, 我经常有这样的遐想: 什么时候现代浏览器里能提供一些辅助方法和类库, 替代那些 JavaScript 工具库, 比如 jQuery, 让我们用浏览器原生的方法替代它们. 我知道浏览器必定会向这个方向改进, 但这个进化过程不会很迅速, 而且各种浏览器需要共同做这样的革新, 火狐浏览器, 谷歌浏览器, 特别是 IE, 只有当这些主流浏览器都具备了这样的功能, 我们的愿望才算真正的实现. 好消息是, 其中有一个这样的功能已经被加入到了 html5 API 里: classList.
在 HTML5 API 里, 页面 DOM 里的每个节点上都有一个 classList 对象, 程序员可以使用里面的方法新增, 删除, 修改节点上的 CSS 类. 使用 classList, 程序员还可以用它来判断某个节点是否被赋予了某个 CSS 类.
Element.classList
这个 classList 对象里有很多有用的方法:
- {
- length: {number}, /* # of class on this element */
- add: function() { [native code] },
- contains: function() { [native code] },
- item: function() { [native code] }, /* by index */
- remove: function() { [native code] },
- toggle: function() { [native code] }
- }
正如你上面看到的, Element.classList 类很小, 但里面的每个方法都很有用.
新增 CSS 类
使用 add 方法, 你可以往页面元素是新增一个或多个 CSS 类:
myDiv.classList.add('myCssClass');
删除一个 CSS 类
使用 remove 方法, 你可以删除单个 CSS 类:
myDiv.classList.remove('myCssClass');
你可以在这个方法里一次传入多个类名, 用空格分开, 但执行的结果很有可能不是你预期的.
反转 CSS 类的有无
- myDiv.classList.toggle('myCssClass'); // 现在是增加
- myDiv.classList.toggle('myCssClass'); // 现在是删除
这个方法的作用就是, 当 myDiv 元素上没有这个 CSS 类时, 它就新增这个 CSS 类; 如果 myDiv 元素已经有了这个 CSS 类, 它就是删除它. 就是反转操作.
检查是否含有某个 CSS 类
myDiv.classList.contains('myCssClass'); //returns true or false
目前所有的现代浏览器 (火狐浏览器, 谷歌浏览器等) 都支持这个 classList 类, 所以, 相信新型的 JavaScript 类库里都会使用 classList 类来操作页面 CSS 类, 而不需像以前一样去分析元素节点的 class 属性!
来源: http://www.webhek.com/post/html5-classlist-api.html