如何在 JavaScript 函数中应用 CSS 样式

本文介绍了如何在 JavaScript 函数中动态地为 HTML 元素添加 CSS 样式。避免使用 `document.write()`，推荐使用 `createElement` 和 `appendChild` 方法创建元素，并通过 `classList.add` 方法添加 CSS 类名，实现样式与逻辑的分离，从而提高代码的可维护性和可读性。同时，展示了将 CSS 样式定义在外部 CSS 文件中，并在 JavaScript 中引用这些样式类的最佳实践。

在 Web 开发中，经常需要在 JavaScript 函数中动态地创建 HTML 元素，并为其应用特定的 CSS 样式。直接在 JavaScript 代码中使用内联样式不仅难以维护，而且会降低代码的可读性。本文将介绍一种更优雅、更推荐的方法，即使用 createElement、appendChild 和 classList.add 方法，将 CSS 样式定义在外部 CSS 文件中，然后在 JavaScript 中引用这些样式类。

避免使用 document.write()

首先，强烈建议避免使用 document.write() 方法。正如 MDN 文档所指出的，document.write() 存在一些问题，可能会导致页面加载缓慢甚至出现错误。

使用 createElement 和 appendChild 创建元素

更好的方法是使用 createElement 创建 HTML 元素，然后使用 appendChild 将其添加到 DOM 树中。例如：

function openQRCodeWindow(registrationId) {
  const container = document.querySelector('.qr-container');
  const titleElement = document.createElement('h1');
  titleElement.textContent = 'ABC';
  container.appendChild(titleElement);
}

openQRCodeWindow('')

这段代码首先获取了 class 为 qr-container 的 HTML 元素，然后创建了一个 h1 元素，并设置其文本内容为 "ABC"，最后将该 h1 元素添加到 qr-container 中。

使用 classList.add 添加 CSS 类名

接下来，可以使用 classList.add 方法为元素添加 CSS 类名。这样可以将样式定义与 JavaScript 逻辑分离，提高代码的可维护性。

function openQRCodeWindow(registrationId) {
  const container = document.querySelector('.qr-container');
  const titleElement = document.createElement('h1');
  titleElement.textContent = 'ABC';
  titleElement.classList.add('title');
  container.appendChild(titleElement);
}

openQRCodeWindow('')

在这个例子中，我们为 h1 元素添加了 title 类。

在 CSS 文件中定义样式

现在，可以在 CSS 文件中定义 title 类的样式。例如：

.title {
  color: red;
}

这段 CSS 代码将所有 class 为 title 的元素的颜色设置为红色。

完整示例

以下是一个完整的示例，展示了如何在 JavaScript 函数中动态地创建 HTML 元素，并为其应用 CSS 样式：

HTML:

JavaScript:

function openQRCodeWindow(registrationId) {
  const container = document.querySelector('.qr-container');
  const titleElement = document.createElement('h1');
  titleElement.textContent = 'ABC';
  titleElement.classList.add('title');
  container.appendChild(titleElement);
}

openQRCodeWindow('')

CSS:

.title {
  color: red;
}

这段代码将在 qr-container 中创建一个红色的 h1 元素，内容为 "ABC"。

总结

通过使用 createElement、appendChild 和 classList.add 方法，可以将 CSS 样式定义与 JavaScript 逻辑分离，提高代码的可维护性和可读性。这种方法也更符合 Web 开发的最佳实践。避免使用 document.write()，并尽可能将样式定义在外部 CSS 文件中，可以使代码更加清晰、易于理解和修改。