ThatManK Mobile Article

classList使用

Category: JS Tutorial: DOM操作 Published: 2026-04-07 13:58 Views: 20 Likes: 0 Comments: 0

classList 使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .bg {
        background-color: black;
      }
    </style>
  </head>

  <body>
    <div class="one two"></div>
    <button>开关灯</button>
    <script>
      // classList 返回元素的类名
      var div = document.querySelector("div");
      console.log(div.classList[1]);

      // 1. 添加类名  是在后面追加类名不会覆盖以前的类名 注意前面不需要加.
      div.classList.add("three");

      // 2. 删除类名
      div.classList.remove("one");

      // 3. 切换类
      var btn = document.querySelector("button");
      btn.addEventListener("click", function () {
        document.body.classList.toggle("bg");
      });
    </script>
  </body>
</html>