使用HTML5里的classList操作CSS类

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

Element.classList

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

正如你上面看到的，Element.classList类很小，但里面的每个方法都很有用。

新增CSS类

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

myDiv.classList.add('myCssClass');

删除一个CSS类

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

myDiv.classList.remove('myCssClass');

你可以在这个方法里一次传入多个类名，用空格分开，但执行的结果很有可能不是你预期的。

反转CSS类的有无

myDiv.classList.toggle('myCssClass'); //现在是增加
myDiv.classList.toggle('myCssClass'); //现在是删除

这个方法的作用就是，当myDiv元素上没有这个CSS类时，它就新增这个CSS类；如果myDiv元素已经有了这个CSS类，它就是删除它。就是反转操作。

检查是否含有某个CSS类

myDiv.classList.contains('myCssClass'); //returns true or false

contains() 支持一个类名字符串参数。表示往类名列表中是否包含该类名。有点对应jQuery中的hasClass方法，注意，这里的是contains而不是contain，后面有个s哦！

返回值很易懂的。如果包含，则返回true, 不包含，则false.

在Firebug控制台结果中，我们还看到了toString()方法。实际上，Chrome浏览器也有（未直接显示），IE10也有，不过，似乎来自层级更高对象的继承。从下面截图中的属性颜色区分可见一斑：

就作用上讲，等同于className. 例如：

document.body.classList.toString() === document.body.className; // true

HTML DOM className 属性

定义和用法: className 属性设置或返回元素的 class 属性。

语法: object.className=classname

实例

本例展示了两种获得 <body> 元素的 class 属性的方法：

<html>
<body id="myid" class="mystyle">
<script type="text/javascript">
x=document.getElementsByTagName('body')[0];
document.write("Body CSS class: " + x.className);
document.write("<br />");
document.write("An alternate way: ");
document.write(document.getElementById('myid').className);
</script>
</body>
</html>

输出：

Body CSS class: mystyle
An alternate way: mystyle

目前所有的现代浏览器(火狐浏览器，谷歌浏览器等)都支持这个classList类，所以，相信新型的javaScript类库里都会使用classList类来操作页面CSS类，而不需像以前一样去分析元素节点的class属性！

四、classList的本质-DOMTokenList

classList的返回值显示，其本质上是DOMTokenList – DOM标记列表.

DOMTokenList这种类型表示一组空间分隔的标记。通常由HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList或HTMLAreaElement.relList返回。从0开始的类JavaScript数组索引。DOMTokenList始终是区分大小写的。

在FireFox以及Chrome下，我们执行typeof DOMTokenList的结果是："function"; 但是在IE10下，却是："object".

同时虽然typeof结果为"function"，但是执行DOMTokenList()会报”Illegal constructor”错误；IE10执行DOMTokenList()也会报错，错误是”缺少函数”。

因此，试图通过typeof obj == "function"来判断obj就是个函数的做法是不完全正确的。

五、classList的局限

classList除了上面提到的不能级联这个无关痛痒的局限外，还有个比较头疼的局限，就是不能一次add或remove或toggle多个类名。//zxx: 级联指的是$().a().b().c()这种可以连在一起调用方法的写法。

例如：

document.body.classList.add("c d");    // Error: String contains an invalid character
document.body.classList.add("c\x20d");   // Error: String contains an invalid character
document.body.classList.remove("c d");    // Error: String contains an invalid character

我们要想多类名处理，需要一个一个来，例如：

var clList = document.body.classList;
clList.add("d");
clList.add("e");
clList.toString(); // "a b c d e"

这一点来看，原生的classList API要比jQuery或MooTools等框架的addClass/removeClass/...等类名相关外挂方法弱爆了。然而，classList API没有恋爱经历、非常单纯。因此，虽然胸小了一点；但是，富豪就是喜欢之。

六、classList的扩展

add的参数个数限制等方法好比生孩子，一次只能生一个，这符合国家要求符合规范。但是，有些有钱人，就像张艺谋，就愁孩子少，恨不能一次生他3个，咋办呢？我们可以试试对classList做扩展，例如扩展一个adds方法，可以一次添加多个类名，多个类名以空格分隔：

DOMTokenList.prototype.adds = function(tokens) {
   tokens.split(" ").forEach(function(token) {
       this.add(token);
   }.bind(this));
   return this;
};

// 看看能不能一下子生3个孩子

var clList = document.body.classList;
clList.adds("child1 child2 child3").toString(); // "a b c child1 child2 child3"

这样，只要肚子够大，想生几个就可以生几个了，中国足球说不定就有希望了——11胞胎争霸全球！

其他些方法，您可以做类似扩展。

但是，平心而论，单类名一个一个添加虽然苦逼了点，但是，个人情感上，因为原汁原味，更喜欢！

//zxx: ios4似乎并未支持bind方法，因此，上面的扩展如果在手机上使用，需稍作调整。

方法

方法	描述
add(class1, class2, ...)	在元素中添加一个或多个类名。如果指定的类名已存在，则不会添加
contains(class)	返回布尔值，判断指定的类名是否存在。可能值： true - 元素包已经包含了该类名 false - 元素中不存在该类名
item(index)	返回类名在元素中的索引值。索引值从 0 开始。如果索引值在区间范围外则返回 null
remove(class1, class2, ...)	移除元素中一个或多个类名。注意：移除不存在的类名，不会报错。
toggle(class, true\|false)	在元素中切换类名。第一个参数为要在元素中移除的类名，并返回 false。如果该类名不存在则会在元素中添加类名，并返回 true。第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：移除一个 class: element.classList.toggle("classToRemove", false); 添加一个 class: element.classList.toggle("classToAdd", true); 注意： Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。

链接：

http://www.zhangxinxu.com/wordpress/2013/07/domtokenlist-html5-dom-classlist-%E7%B1%BB%E5%90%8D/

http://www.runoob.com/jsref/prop-element-classlist.html

posted on 2017-02-28 17:24 liuruyi007 阅读(272) 评论(0) 收藏举报