使用HTML5中的classList操作CSS类

来源：互联网发布：福州靠谱网络招聘编辑：程序博客网时间：2024/06/06 18:16

在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，可以方便地使用它。

0 0