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
Some CSS properties may need to be vendor-prefixed.

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的更多相关文章

  1. HTML5 classList API接口

    原文地址:HTML5 classList API 原文日期: 2010年07月13日 翻译日期: 2013年08月23日 当我陷入JavaScrip和JavaScript类库框架之中时,我总是有种希望 ...

  2. [转]HTML5 classList API

    Having thrust myself into the world of JavaScript and JavaScript Libraries, I've often wondered: Whe ...

  3. 温习classList api

    有道题是一个removeClass的功能,代码里是正则分隔了传入的name,根据name的个数,循环移除掉,让寻找bug..看了了这几行代码,首先想到的是我会如何去优化. 如果看代码一两分钟就能找到公 ...

  4. 使用 classList API

    一.classList API 是什么 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时&qu ...

  5. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  6. HTML5 Drop API

    转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言    在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...

  7. Three.js + HTML5 Audio API 打造3D音乐频谱,Let’s ROCK!

    继续玩味之前写的音乐频谱作品,将原来在Canvas标签上的 作图利用Three.js让它通过WebGL呈现,这样就打造出了一个全立体感的频谱效果了. 项目详情及源码 项目GitHub地址:https: ...

  8. HTML5 File API — 让前端操作文件变的可能

    前言 在 HTML5 File API 出现之前,前端对于文件的操作是非常有局限性的,大多需要配合后端实现.出于安全角度考虑,从本地上传文件时,代码不可能获取文件在用户本地的地址,所以纯前端不可能完成 ...

  9. 开大你的音响,感受HTML5 Audio API带来的视听盛宴

    话说HTML5的炫酷真的是让我爱不释手,即使在这个提到IE就伤心不完的年代.但话又说回来,追求卓越Web创造更美世界这样高的追求什么时候又与IE沾过边儿呢?所以当你在看本文并且我们开始讨论HTML5等 ...

随机推荐

  1. 周记3——解决fixed属性在ios软键盘弹出后失效的bug

    这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...

  2. [android] 界面的划分

    1.统一界面管理 1.1利用一个activity去管理应用的所有的界面 1.1.1 理解Activity,Window和View之间的关系 1.1.2 避免Activity过多导致的问题, 例如:彻底 ...

  3. Spring Cloud实战之初级入门(五)— 配置中心服务化与配置实时刷新

    目录 1.环境介绍 2.配置中心服务化 2.1 改造mirco-service-spring-config 2.2 改造mirco-service-provider.mirco-service-con ...

  4. 6、springboot之根目录设置

    访问的时候用

  5. so模块加载后数据问题

    lualib-src里面都没有存数据的地方 那么bjm里面的这块数据防全局,再多个虚拟机里require后数据会全局共享吗

  6. wamp配置步骤

    对于初做PHP网站的朋友来说,第一步肯定是希望在自己电脑是搭建PHP环境,省去空间和上传的麻烦!但搭建环境也不是件容易的事情,特别是对于新手同学来说!因此在这里跟大家介绍我作为一名新手在使用的方便好用 ...

  7. 织梦后台添加友情链接的方法(flink标签)

    标记名称:flink[标签简介][功能说明]:用于获取友情链接,其对应后台文件为"includetaglibflink.lib.php".[适用范围]:全局标记,适用V55,V56 ...

  8. Spring 框架(三)

    1 spring l AOP :切面编程 切面:切入点 和 通知 结合 l spring aop 编程 <aop:config> 方法1: <aop:pointcut express ...

  9. arcgis 地理国情建库软件已完成

    arcgis 地理国情软件已完成: 1.创建1:25000(或则其他比例尺)国家2000坐标系接合表 2.按照地理国情普查数据库标准,创建标准数据库 3.外业调查工作底图制作 4.矢量和影像数据批量裁 ...

  10. Java集合排序

    [ 1.对普通的包装类基本数据类型的list数组排序(Integer,Long,Double) ] Collections.sort(List list) [例] List<Long> m ...