使用HTML5中的classList操作CSS类

在HTML5 API 里，页面DOM中的每个节点上都有一个classList对象，web developer 可以使用里面的方法新增、删除、修改节点上的CSS类。使用classList，还可以判断某个节点是否被赋予了某个CSS类。

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] }
}

一、新增CSS类

使用add方法，可以向页面元素中新增一个或多个css类：

<span style="white-space:pre">	</span>myDiv.classList.add('myCssClass');

二、删除一个CSS类

使用remove方法，可以删除单个css类：

<span style="white-space:pre">	</span>myDiv.classList.remove('myCssClass');

三、反转CSS类的有无：

<span style="white-space:pre">	</span>myDiv.classList.toggle('myCssClass'); //现在是增加<span style="white-space:pre">	</span>
<span style="white-space:pre">	</span>myDiv.classList.toggle('myCssClass'); //现在是删除

就是说，当myDiv元素上没有这个css类的时候，它就新增这个css类，如果myDiv元素已经有了这个css类，它就删除这个css类。

四、检查是否含有某个css类：

<span style="white-space:pre">	</span>myDiv.classList.contains('myCssClass'); //returns true or false

 

目前，所有的现代浏览器都支持classList，可以方便地使用它。