本文旨在指导开发者如何使用 JavaScript 函数动态地向 HTML 元素添加 CSS 样式，避免使用 `document.write()`，并采用 `appendChild` 和 `classList.add` 等更现代、更安全的方法。通过示例代码和详细解释，帮助读者理解如何在 JavaScript 中高效地操作 CSS 样式，从而实现更灵活和可维护的前端代码。

避免使用 document.write()

document.write() 方法在现代 Web 开发中已不推荐使用。它可能会导致页面加载性能问题，并且在某些情况下会覆盖现有的 HTML 结构，导致不可预测的行为。因此，我们应该寻找替代方案。

使用 appendChild 创建和添加元素

appendChild 方法允许我们动态地创建 HTML 元素，并将其添加到 DOM 树中。这是一种更安全、更灵活的方式来构建页面内容。

例如，要创建一个

元素并将其添加到 qr-container div 中，可以这样做：

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

openQRCodeWindow('');

这段代码首先使用 document.querySelector 找到 class 为 qr-container 的元素。然后，它创建一个新的

元素，设置其文本内容为 "ABC"，并使用 appendChild 将其添加到 qr-container 中。

使用 classList.add 添加 CSS 类

为了应用 CSS 样式，我们可以使用 classList.add 方法向元素添加 CSS 类。这使得我们可以将样式定义与 JavaScript 代码分离，从而提高代码的可维护性。

例如，要向上面创建的

元素添加一个名为 title 的 CSS 类，可以这样做：

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 类的样式：

.title {
  color: red;
}

这样，

元素的文本颜色就会变成红色。

完整示例

将上述概念整合，我们可以创建一个更完整的示例，动态地创建包含样式的 QR 码信息：

代码解释：

1. HTML 结构： 创建了包含 qr-container 和 details-container 的基本 HTML 结构。
2. CSS 样式： 定义了 container，qr-container，details-container 和 title 类的样式，以控制布局和外观。
3. openQRCodeWindow 函数：
   • 接收 QR 码数据和其他详细信息作为参数。
   • 使用 document.querySelector 获取 qr-container 和 details-container 元素。
   • 使用 document.createElement 创建 HTML 元素（img, h3, p）。
   • 设置元素的 src 或 textContent 属性。
   • 使用 appendChild 将新元素添加到相应的容器中。
4. 示例用法： 调用 openQRCodeWindow 函数，并传递示例数据（需要替换为实际数据）。 请注意，qrCodeDataURL 需要替换为实际的 QR 码 data URL。

总结

通过使用 appendChild 和 classList.add 等方法，我们可以更安全、更灵活地在 JavaScript 中动态地操作 CSS 样式。 这种方法避免了使用 document.write() 带来的问题，并使我们的代码更易于维护和扩展。 记住将样式定义与 JavaScript 代码分离，以获得更好的代码组织和可读性。