📌  相关文章
📜  vanilla javascript 添加类 - Javascript (1)

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

Vanilla JavaScript 添加类 - JavaScript

在 JavaScript 中，我们经常需要在 HTML 元素上添加或删除类。这可以通过内置的 DOM API 完成。在本文中，我们将讨论如何使用 Vanilla JavaScript（无任何框架或库）添加类。

通过 classList 属性添加类

在 ES2015（又称为 ES6）中，浏览器 DOM API 将 classList 添加到元素上。我们可以使用它来轻松地添加、删除和切换类。要使用 classList 添加类，请遵循以下步骤：

  1. 获取要添加类的元素引用
  2. 使用 classList 的 add 方法添加类

这是一个使用 classList 添加类的示例函数：

function addClass(element, className) {
  element.classList.add(className);
}

该函数需要两个参数：

  • element：要添加类的元素
  • className：要添加的类名

它可以像这样使用：

const el = document.querySelector("#myElement");
addClass(el, "myClass");

在上面的代码中，我们使用 querySelector 获取了 ID 为 myElement 的元素，并将 myClass 类添加到它上面。

通过 className 属性添加类

在没有 classList 的旧浏览器中，我们可以使用 className 属性来添加类。这需要注意，因为设置 className 属性将覆盖元素上的所有类。要使用 className 添加类，请遵循以下步骤：

  1. 获取要添加类的元素引用
  2. 将要添加的类名追加到 className

这是一个使用 className 添加类的示例函数：

function addClass(element, className) {
  element.className += " " + className;
}

该函数需要两个参数：

  • element：要添加类的元素
  • className：要添加的类名

它可以像这样使用：

const el = document.querySelector("#myElement");
addClass(el, "myClass");

在上面的代码中，我们使用 querySelector 获取了 ID 为 myElement 的元素，并将 myClass 类添加到它上面。

示例

这是一个 HTML 页面，它包含一个按钮。单击按钮将在 myElement 元素上添加 highlight 类，单击两次将删除该类：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>JavaScript 添加类</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="myElement">这是一个文本</div>
    <button id="myButton">添加类</button>
    <script>
      const el = document.querySelector("#myElement");
      const button = document.querySelector("#myButton");
      let clicked = false;

      button.addEventListener("click", function() {
        if (!clicked) {
          addClass(el, "highlight");
          clicked = true;
        } else {
          el.classList.remove("highlight");
          clicked = false;
        }
      });

      function addClass(element, className) {
        if (element.classList) {
          element.classList.add(className);
        } else {
          element.className += " " + className;
        }
      }
    </script>
  </body>
</html>
结论

在本文中，我们学习了如何使用 Vanilla JavaScript（无框架或库）添加类。我们讨论了使用 classList 和 className 两种方法，并提供了示例代码。现在你可以开始使用这些技术将类添加到你的 HTML 元素中了！