开发者社区> 铁锚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

HTML5 classList API接口

简介: 原文地址:HTML5 classList API 原文日期: 2010年07月13日 翻译日期: 2013年08月23日 当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望:什么时候浏览器厂商才能用本地代码原生地实现这些由工具类库所提供的方法呢? 我也知道标准的重要性,然而厂商们几乎不可能花大价钱钱仅仅为了实现这些功能。
+关注继续查看
原文地址: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属性。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
HTML的笔记及展示(1)(锚点、a元素添加超链接href、img元素、iframe元素、HTML5新增的拖放API)
0 0
history对象和HTML5 History API
history对象和HTML5 History API
0 0
HTML5使用Geoloacation API检测浏览器的支持性
HTML5使用Geoloacation API检测浏览器的支持性
0 0
HTML5中localStorage,seeionStorage API使用
HTML5中localStorage,seeionStorage API使用,和学习心得!
0 0
HTML5新特性drag API 实现拖放功能(上)
最近在写项目时遇到了元素拖拽的需求,因此我在翻阅了大量资料以及多次亲手尝试后,准备对这个功能做一篇完整的博客总结。
0 0
29行代码使用HTML5 Canvas API绘制一颗红心
29行代码使用HTML5 Canvas API绘制一颗红心
0 0
29行代码使用HTML5 Canvas API绘制一颗红心
29行代码使用HTML5 Canvas API绘制一颗红心
0 0
HTML5 Web Speech API,让网站更有趣
Web API 变得越来越丰富,其中一个值得注意的是Web Speech API。传统的网站只能“说”,这个API的出现,让网站能“倾听”用户。这个功能已经开放了一系列的用法,非常棒。
0 0
虚假来电:HTML5 振动 API 的恶意使用
一个新的API出来了。HTML5 (很快)将支持用户设备振动。这明显是很有趣的事情,比如它可以用户触发提醒,提升游戏体验,以及其他各种好玩的事情,例如通过振动发送摩斯代码。
0 0
+关注
铁锚
Java与数据库开发
文章
问答
文章排行榜
最热
最新
相关电子书
更多
CUDA Math API
立即下载
阿里云 API 精选手册(Alibaba Cloud API Playbook)
立即下载
重保场景及API安全指南
立即下载