HTML5 classList 小结

最新推荐文章于 2025-02-28 21:29:49 发布

原创最新推荐文章于 2025-02-28 21:29:49 发布 · 620 阅读

0 ·

CC 4.0 BY-SA版权

HTML5 专栏收录该内容

0 篇文章

订阅专栏

本文介绍HTML5中HTMLElement元素提供的classList属性，用于简化className的操作。文章详细解释了DOMTokenList接口的方法，并通过示例展示了如何使用这些方法来添加、删除和切换CSS类。

在HTML5中HTMLElement元素提供了classList 属性来简化操作className, 他属于DOMTokenList接口

interface DOMTokenList {
  readonly attribute unsigned long length;
  getter DOMString item(in unsigned long index);
  boolean contains(in DOMString token);
  void add(in DOMString token);
  void remove(in DOMString token);
  boolean toggle(in DOMString token);
  stringifier DOMString();
};

例如有以下HTML代码

<div class="name1 name2 name3"></div>

我们可以用如下方式获取该元素的classList属性：

var node = document.querySelector("div.name1.name2.name3"),
list = node.classList;

list; // 输出classList属性

list.classList.length; // 3，它含有3个css 类名

list.item(0); // 输出 name1 等同list[0],如果访问的不存在则返回null

list.contains("name1"); // true className中含有name1

list.contains("name0"); // false 没有包含这个

list.add("name4"); // 现在变成了 name1 name2 name3 name4, 一次只能添加一个

list.remove("name4") // 把刚才添加的删除掉

list.toggle("name1") // 如果存在name1则删除它， 不存在则添加到末尾

用起来方便多了吧？

如果要整体操作则用HTMLElement的className属性吧