本文旨在指导开发者如何使用 JavaScript 函数动态地向 HTML 元素添加 CSS 样式，避免使用 `document.write()`，并采用 `appendChild` 和 `classList.add` 等更现代、更安全的方法。通过示例代码和详细解释，帮助读者理解如何在 JavaScript 中高效地操作 CSS 样式，从而实现更灵活和可维护的前端代码。
避免使用 document.write()
document.write() 方法在现代 Web 开发中已不推荐使用。它可能会导致页面加载性能问题，并且在某些情况下会覆盖现有的 HTML 结构，导致不可预测的行为。因此，我们应该寻找替代方案。
使用 appendChild 创建和添加元素
appendChild 方法允许我们动态地创建 HTML 元素，并将其添加到 DOM 树中。这是一种更安全、更灵活的方式来构建页面内容。
例如，要创建一个
元素并将其添加到 qr-container div 中，可以这样做：
立即学习“Java免费学习笔记（深入）”；
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 码信息：
Dynamic QR Code
代码解释：
- HTML 结构： 创建了包含 qr-container 和 details-container 的基本 HTML 结构。
- CSS 样式： 定义了 container，qr-container，details-container 和 title 类的样式，以控制布局和外观。
-
openQRCodeWindow 函数：
- 接收 QR 码数据和其他详细信息作为参数。
- 使用 document.querySelector 获取 qr-container 和 details-container 元素。
- 使用 document.createElement 创建 HTML 元素（img, h3, p）。
- 设置元素的 src 或 textContent 属性。
- 使用 appendChild 将新元素添加到相应的容器中。
- 示例用法： 调用 openQRCodeWindow 函数，并传递示例数据（需要替换为实际数据）。 请注意，qrCodeDataURL 需要替换为实际的 QR 码 data URL。
总结
通过使用 appendChild 和 classList.add 等方法，我们可以更安全、更灵活地在 JavaScript 中动态地操作 CSS 样式。 这种方法避免了使用 document.write() 带来的问题，并使我们的代码更易于维护和扩展。 记住将样式定义与 JavaScript 代码分离，以获得更好的代码组织和可读性。
