HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered:
When are browser vendors going to see the helper methods/libraries created by the JavaScript toolkits and implement these functionalities natively within the browser? I realize that standards are important and browser vendors can't afford to
half-ass these implementations but I do believe they could be...expedited. The good news is that one of these functionalities has been add to the HTML5 API;
classList.
The classList object, added to all nodes within the DOM, provides developers methods by which to add, remove, and toggle CSS classes on a node. classList also allows developers to check if a CSS
class has been assigned to a given node.
Element.classList
The classList object contains a number of helpful methods:
{
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, as you can see, is a small but useful collection of methods.
Adding a CSS Class
The add method allows you to add one more multiple space-separated classes:
myDiv.classList.add('myCssClass');
Removing a CSS Class
The add method allows you to remove a single class:
myDiv.classList.remove('myCssClass');
You could separate multiple classes by space but the result may not be incredibly reliable.
Toggling a CSS Class
myDiv.classList.toggle('myCssClass'); //now it's added
myDiv.classList.toggle('myCssClass'); //now it's removed
Note: If toggle is called and the element does not have the provided CSS class, the class is added.
Contains CSS Class Check
myDiv.classList.contains('myCssClass'); //returns true or false
The classList API is now supported by all modern browsers, so look for the JavaScript libraries to include
classList checks instead of parsing an element's class attribute!
HTML5 classList API的更多相关文章
- HTML5 classList API接口
原文地址:HTML5 classList API 原文日期: 2010年07月13日 翻译日期: 2013年08月23日 当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望 ...
- [转]HTML5 classList API
Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...
- 温习classList api
有道题是一个removeClass的功能,代码里是正则分隔了传入的name,根据name的个数,循环移除掉,让寻找bug..看了了这几行代码,首先想到的是我会如何去优化. 如果看代码一两分钟就能找到公 ...
- 使用 classList API
一.classList API 是什么 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时&qu ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- HTML5 Drop API
转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...
- Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!
继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...
- HTML5 File API — 让前端操作文件变的可能
前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...
- 开大你的音响,感受HTML5 Audio API带来的视听盛宴
话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...
随机推荐
- 有标号的DAG计数 III
Description 给定一正整数n,对n个点有标号的有向无环图进行计数,这里加一个限制:此图必须是弱连通图.输出答案 mod 10007 的结果. Solution 弱连通图即把边变成无向之后成为 ...
- PHP学习5——异常处理
主要内容: PHP错误类型 异常的产生 错误日志 日志信息记录到操作系统日志 异常处理 扩展异常处理类 PHP错误类型 语法错误 执行时错误 逻辑错误 异常的产生 如果安装了xampp之后,在php. ...
- C#利用WinForm调用WebServices实现增删改查
实习导师要求做一个项目,用Winform调用WebServices实现增删改查的功能.写下这篇博客,当做是这个项目的总结.如果您有什么建议,可以给我留言.欢迎指正. 1.首先,我接到这个项目的时候,根 ...
- 告别Flash——那些年我们追过的FusionCharts
随着FusionCharts最终放弃Flash这块蛋糕,不.或者已经不能叫做蛋糕了,现在Flash图表控件就只剩下AnyChart这一个独苗了,到底Flash还能走多远?这是Flash的末路吗? 众说 ...
- TCP学习(一)
协议分层 可以看到 物理层, 链路层,网络层是所有网络设备共有的, 而传输层, 会话层, 表示层, 应用层 是存在于主机上的 各设备实现的协议层次 IP地址的表示 为什么会出现ip地址?是为了在一 ...
- Redis实现主从复制(Master&Slave)
由于前段时间公司项目比较赶,一直抽不出时间写博客,今天偷空写一篇吧.前面给大家讲解了单机版redis的基本操作,现在继续给大家讲解一下Redis的进阶部分,主从复制和读写分离. 一.Master&am ...
- 版本控制器之SVN
1.开发中的实际问题 1.1 小明负责的模块就要完成了,就在即将Release之前的一瞬间,电脑突然蓝屏,硬盘光荣牺牲!几个月来的努力付之东流——需求之一:备份! 1.2 这个项目中需要一个很复杂的功 ...
- jquery+springMVC实现文件上传
此文章是基于 搭建Jquery+SpringMVC+Spring+Hibernate+MySQL平台 一. jar包介绍 1. commons-fileupload-1.3.1.jar 二. 相关程序 ...
- PHP DES解密 对应Java SHA1PRNG方式加密
背景及问题 背景:在和外部系统通过HTTP方式跳转时, 为保障传输参数安全性, 采用AES 加密参数. 关于对称加密中 AES, DES, CBC, ECB, PKCS5Padding 概念可参考ht ...
- sql:function
--查询权限函数 --1 declare @names varchar(3000) set @names='' select @names=@names+isnull(AdminPermissForm ...