本文旨在指导开发者如何使用 JavaScript 函数动态地向 HTML 元素添加 CSS 样式，避免使用 `document.write()`，并采用 `appendChild` 和 `classList.add` 等更现代、更安全的方法。通过示例代码和详细解释，帮助读者理解如何在 JavaScript 中高效地操作 CSS 样式，从而实现更灵活和可维护的前端代码。
避免使用 document.write()
document.write() 方法在现代 Web 开发中已不推荐使用。它可能会导致页面加载性能问题，并且在某些情况下会覆盖现有的 HTML 结构，导致不可预测的行为。因此，我们应该寻找替代方案。
使用 appendChild 创建和添加元素
appendChild 方法允许我们动态地创建 HTML 元素，并将其添加到 DOM 树中。这是一种更安全、更灵活的方式来构建页面内容。
例如，要创建一个 <h1> 元素并将其添加到 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 的元素。然后，它创建一个新的 <h1> 元素，设置其文本内容为 "ABC"，并使用 appendChild 将其添加到 qr-container 中。
使用 classList.add 添加 CSS 类
为了应用 CSS 样式，我们可以使用 classList.add 方法向元素添加 CSS 类。这使得我们可以将样式定义与 JavaScript 代码分离，从而提高代码的可维护性。
例如，要向上面创建的 <h1> 元素添加一个名为 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;
}这样，<h1> 元素的文本颜色就会变成红色。
完整示例
将上述概念整合，我们可以创建一个更完整的示例，动态地创建包含样式的 QR 码信息：
<!DOCTYPE html>
<html>
<head>
<title>Dynamic QR Code</title>
<style>
.container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 50px;
border: 2px solid #ccc;
border-radius: 10px;
width: 400px;
}
.qr-container {
margin-right: 20px;
}
.details-container {
text-align: right;
}
.title {
color: blue;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container" id="form-container">
<div class="qr-container">
<!-- QR code image will be added here -->
</div>
<div class="details-container">
<!-- Details will be added here -->
</div>
</div>
<script>
function openQRCodeWindow(registrationId, firstName, lastName, email, contactNumber, seatNumber, qrCodeImage) {
const qrContainer = document.querySelector('.qr-container');
const detailsContainer = document.querySelector('.details-container');
// Create and append QR code image
const qrImage = document.createElement('img');
qrImage.src = qrCodeImage;
qrContainer.appendChild(qrImage);
// Create and append details
const titleElement = document.createElement('h3');
titleElement.textContent = 'Details';
detailsContainer.appendChild(titleElement);
const registrationIdElement = document.createElement('p');
registrationIdElement.textContent = 'Registration ID: ' + registrationId;
detailsContainer.appendChild(registrationIdElement);
const firstNameElement = document.createElement('p');
firstNameElement.textContent = 'First Name: ' + firstName;
detailsContainer.appendChild(firstNameElement);
const lastNameElement = document.createElement('p');
lastNameElement.textContent = 'Last Name: ' + lastName;
detailsContainer.appendChild(lastNameElement);
const emailElement = document.createElement('p');
emailElement.textContent = 'Email: ' + email;
detailsContainer.appendChild(emailElement);
const contactNumberElement = document.createElement('p');
contactNumberElement.textContent = 'Contact Number: ' + contactNumber;
detailsContainer.appendChild(contactNumberElement);
const seatNumberElement = document.createElement('p');
seatNumberElement.textContent = seatNumber;
detailsContainer.appendChild(seatNumberElement);
}
// Example usage (replace with your actual data)
const qrCodeDataURL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w+bL/DAAMRQw0YmrNw4nNLAYXjv0gAAAAABJRU5ErkJggg=="; // Replace with your actual QR code data URL
openQRCodeWindow('12345', 'John', 'Doe', 'john.doe@example.com', '123-456-7890', 'Seat A1', qrCodeDataURL);
</script>
</body>
</html>代码解释：
- 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 代码分离，以获得更好的代码组织和可读性。
