使用 TypeScript 将类添加到 Body 元素

作者

使用 TypeScript 向 Body 元素添加一个类

Add a class to the Body element using TypeScript

要在 TypeScript 中向 body 元素添加一个类，请调用classList.add()
body 对象上的方法，例如document.body.classList.add('my-class'). 该
add()方法将一个或多个类添加到列表中，省略任何已经存在的类。

以下是本文示例的 HTML。

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

    <style>
      .salmon {
        background-color: salmon;
      }
    </style>
  </head>
  <body>
    <div>Hello world</div>

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

这是相关的 TypeScript 代码。

源代码/index.ts
// ✅ Add class to body element
document.body.classList.add('salmon');

// ✅ Remove class from body element
// document.body.classList.remove('salmon');

我们使用
classList.add()
方法在 body 对象上添加一个类。

我们可以访问document对象上的 body 元素。

如果该类已经存在于body元素上，则不会添加两次。

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

源代码/index.ts
// ✅ Add class to body element
document.body.classList.add(
  'salmon',
  'second-class',
  'third-class'
);

// ✅ Remove class from body element
// document.body.classList.remove('salmon');

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

源代码/index.ts
// ✅ Add class to body element
document.body.classList.add(
  'salmon',
  'second-class',
  'third-class'
);

// ✅ Remove class from body element
document.body.classList.remove(
  'salmon',
  'third-class'
);

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

您可能已经在网上看到重新分配classNamebody 元素属性的示例。

源代码/index.ts
document.body.className += 'salmon';

这种方法有效，但是在使用它时我们没有利用该classList.add()方法提供的一些内置功能。

源代码/index.ts
document.body.className += 'salmon';
document.body.className += 'salmon';
上面的代码片段添加了两次该类，因为没有任何检查仅在该类不存在于元素上时才添加该类。

如果您必须切换类或删除它，这将导致非常混乱的行为。

您还可以在事件发生时向 body 元素添加一个类，例如单击按钮。

这是下一个示例的 HTML。

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

    <style>
      .salmon {
        background-color: salmon;
      }
    </style>
  </head>
  <body>
    <div>Hello world</div>

    <button id="btn">Click me</button>

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

这是相关的 JavaScript 代码。

源代码/index.ts
const btn = document.getElementById('btn');

btn?.addEventListener('click', function onClick() {
  if (document.body.classList.contains('salmon')) {
    document.body.classList.remove('salmon');
  } else {
    document.body.classList.add('salmon');
  }
});

我们向click按钮元素添加了一个事件侦听器。

每次单击按钮时onClick都会调用该函数。

我们的if条件检查salmon类是否包含在 body 元素中，如果是则将其删除，否则将类添加到 body 元素中。

–