本文介绍了如何在 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 树中。例如：
立即学习“Java免费学习笔记（深入）”；
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:
<div class='qr-container'></div>
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 文件中，可以使代码更加清晰、易于理解和修改。
