HTML | DOM classList 属性(1)

📌 相关文章

📜 HTML | DOM classList 属性(1)

📅 最后修改于: 2023-12-03 15:31:11.648000 🧑 作者: Mango

HTML | DOM classList 属性

HTML | DOM classList 属性是用于向 HTML 元素添加、删除和修改类的属性。

语法

element.classList

描述

classList 属性返回元素的类名，作为一个 DOMTokenList 对象。
可在元素中添加，移除和切换 CSS 类。
DOMTokenList 对象是只读的，可使用 add()、remove()、toggle() 和 contains() 方法来修改元素的类。
classList 属性适用于所有 HTML 元素节点以及 SVG 的 "rect" 元素和 "SVGSVGElement" 元素。

常用操作

1. 添加一个类

element.classList.add("new-class");

2. 删除一个类

element.classList.remove("old-class");

3. 切换一个类

element.classList.toggle("active");

4. 检查一个类是否存在

if (element.classList.contains("className")) {
  // do something
}

示例

<!DOCTYPE html>
<html>
<head>
  <style>
    .highlight {
      background: yellow;
    }
  </style>
</head>
<body>
  <p id="myP">Hello World!</p>

  <script>
    const p = document.getElementById("myP");
    p.classList.add("highlight");
  </script>
</body>
</html>

上面的示例将为 id 为 "myP" 的
元素添加一个 "highlight" 类，使其背景变为黄色。

参考

MDN web docs - classList