使用 TypeScript 向元素添加类

作者

使用 TypeScript 向元素添加类

Add a class to an Element using TypeScript

在 TypeScript 中向元素添加类：

  1. 选择元素。
  2. 使用该classList.add()方法向元素添加一个类。
  3. 如果提供的类不存在，该方法会将提供的类添加到元素中。

以下是本文示例的 HTML。

索引.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />

    <style>
      .bg-yellow {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div id="box">Box 1</div>

    <script src="./src/index.ts"></script>
  </body>
</html>

这是相关的 TypeScript 代码。

源代码/index.ts
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  // ✅ Add class
  box.classList.add('bg-yellow');

  // ✅ Remove class
  // box.classList.remove('bg-yellow');
}

如果 DOM 中不存在提供的元素，document.getElementById
方法
将返回，因此我们确保该变量不存储值。nullidboxnull

我们使用
classList.add()
方法向元素添加一个类。

如果类已经存在于被点击的元素上，它不会被添加两次。

您可以根据需要将尽可能多的类传递给该add()方法。

源代码/index.ts
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  // ✅ Add class
  box.classList.add(
   'bg-yellow',
   'second-class',
   'third-class'
  );

  // ✅ Remove class
  // box.classList.remove('bg-yellow');
}

同样，如果需要删除一个或多个类，可以使用该remove()
方法。

源代码/index.ts
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  // ✅ Add class
  // box.classList.add('bg-yellow', 'second-class', 'third-class');

  // ✅ Remove class
  box.classList.remove('bg-yellow');
}

然后我们使用
classList.remove
方法从元素中删除bg-yellow类。div

您还可以根据需要将尽可能多的类传递给该remove()方法。

源代码/index.ts
// 👇️ const box: HTMLElement | null
const box = document.getElementById('box');

if (box != null) {
  // ✅ Add class
  // box.classList.add('bg-yellow', 'second-class', 'third-class');

  // ✅ Remove class
  box.classList.remove(
    'bg-yellow',
    'second-class',
    'third-class'
  );
}

如果元素上不存在任何类，该remove()方法将忽略该类并且不会抛出错误。

–

发表评论