HTML5 相关扩展

weixin_34202952

于 2017-03-05 21:57:00 发布

阅读量102

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/kasmine/p/6507022.html

本文介绍HTML5新增的ClassList API及其使用方法，包括添加、删除、切换及检查class的操作，并提供了一个实用的ClassUtil工具集合。

一、与类相关的扩展

class属性的应用极其广泛，与class的相关的操作也越来越简化，HTML5增加了 getElementsByClassName来查找元素，通过也增加了classList属性，方便我们对class进行操作，下面总结了一个ClassUtil ：

 1 var ClassUtil = {
 2   addClass: function (ele, className) {
 3     ele.classList.add(className);
 4   },
 5   removeClass: function (ele, className) {
 6     ele.classList.remove(className);
 7   },
 8   toggleClass: function (ele, className) {
 9     ele.classList.toggle(className);
10   },
11   hasClass: function (ele, className) {
12     return ele.classList.contains(className);
13   },
14   getClassName: function (ele) {
15     return ele.className.split(/\s+/);
16   }
17 }