使用 JavaScript 函数动态添加 CSS 样式

本文将介绍如何使用 JavaScript 函数动态地将 CSS 样式应用于 HTML 元素，避免使用 document.write() 方法，并采用 appendChild 和 classList.add 等现代 Web 开发技术，实现灵活且可维护的样式控制。我们将通过示例代码，详细讲解如何创建元素、添加类名以及将元素插入到 DOM 树中。

动态添加 CSS 样式的常用方法

在 Web 开发中，动态地改变元素的样式是非常常见的需求。直接在 JavaScript 中使用内联样式虽然可行，但不利于代码维护和样式复用。更推荐的做法是将样式定义在 CSS 文件中，然后通过 JavaScript 动态地为元素添加或删除类名，从而控制元素的样式。

以下是几种常用的方法：

1. classList.add(className): 向元素的 classList 属性添加指定的类名。
2. classList.remove(className): 从元素的 classList 属性移除指定的类名。
3. classList.toggle(className): 如果元素的 classList 属性中存在指定的类名，则移除它；否则，添加它。
4. element.style.property = value: 直接设置元素的内联样式。不推荐大量使用，因为它会降低代码的可维护性。

示例：动态创建 QR Code 窗口并应用样式

假设我们需要动态创建一个包含 QR Code 的窗口，并应用特定的样式。以下是一个完整的示例：

立即学习“Java免费学习笔记（深入）”；

HTML 结构:

<div id="qr-container"></div>

CSS 样式 (style.css):

.qr-window {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-image: url("megapolis background.png"); /* 替换为你的背景图片 */
  background-size: cover;
  padding: 20px;
}

.qr-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border: 2px solid #ccc;
  border-radius: 10px;
  width: 400px;
  margin-bottom: 20px;
}

.qr-image {
  margin-right: 20px;
}

.details-container {
  text-align: right;
}

.details-container h3 {
  margin-bottom: 10px;
}

.button-container {
  margin-top: 20px;
  text-align: center;
}

.button-container button {
  margin: 0 5px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript 代码:

天工大模型

中国首个对标ChatGPT的双千亿级大语言模型

下载

function openQRCodeWindow(registrationId, qrCodeImage, firstName, lastName, email, contactNumber, seatNumber) {
  // 获取容器元素
  const qrContainer = document.getElementById('qr-container');

  // 创建窗口容器
  const qrWindow = document.createElement('div');
  qrWindow.classList.add('qr-window');

  // 创建 QR Code 容器
  const container = document.createElement('div');
  container.classList.add('qr-container');

  // 创建 QR Code 图片元素
  const qrImageElement = document.createElement('img');
  qrImageElement.src = qrCodeImage;
  qrImageElement.alt = "QR Code";
  qrImageElement.classList.add('qr-image');

  // 创建详情容器
  const detailsContainer = document.createElement('div');
  detailsContainer.classList.add('details-container');

  // 创建详情内容
  const detailsHTML = `
    <h3>Details</h3>
    <p>Registration ID: ${registrationId}</p>
    <p>First Name: ${firstName}</p>
    <p>Last Name: ${lastName}</p>
    <p>Email: ${email}</p>
    <p>Contact Number: ${contactNumber}</p>
    <p>${seatNumber}</p>
  `;
  detailsContainer.innerHTML = detailsHTML;

  // 创建按钮容器
  const buttonContainer = document.createElement('div');
  buttonContainer.classList.add('button-container');

  // 创建按钮
  const saveImageButton = document.createElement('button');
  saveImageButton.textContent = 'Save Image';

  const emailButton = document.createElement('button');
  emailButton.textContent = 'Email';

  // 将元素添加到容器中
  container.appendChild(qrImageElement);
  container.appendChild(detailsContainer);

  buttonContainer.appendChild(saveImageButton);
  buttonContainer.appendChild(emailButton);

  qrWindow.appendChild(container);
  qrWindow.appendChild(buttonContainer);

  qrContainer.appendChild(qrWindow);
}

// 示例调用
// 假设你已经获取了这些数据
const registrationId = "12345";
const qrCodeImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="; // 替换为你的 QR Code 数据
const firstName = "John";
const lastName = "Doe";
const email = "john.doe@example.com";
const contactNumber = "123-456-7890";
const seatNumber = "Seat A1";

openQRCodeWindow(registrationId, qrCodeImage, firstName, lastName, email, contactNumber, seatNumber);

代码解释:

1. openQRCodeWindow 函数: 接收 QR Code 相关的数据作为参数。
2. 创建元素: 使用 document.createElement 创建 HTML 元素，例如 div、img 和 button。
3. 添加类名: 使用 classList.add 为元素添加 CSS 类名，从而应用预定义的样式。
4. 设置属性: 使用 element.src、element.textContent 和 element.innerHTML 设置元素的属性和内容。
5. 添加子元素: 使用 appendChild 将元素添加到 DOM 树中。
6. 示例调用: 展示如何调用 openQRCodeWindow 函数，并传递示例数据。

注意事项

• 避免 document.write(): document.write() 会覆盖整个文档，不推荐在现代 Web 开发中使用。
• CSS 分离: 将样式定义在 CSS 文件中，并通过类名来控制元素的样式，可以提高代码的可维护性和可重用性。
• 性能优化: 频繁操作 DOM 可能会影响性能。尽量减少 DOM 操作的次数，例如可以使用文档片段（DocumentFragment）来批量添加元素。
• 错误处理: 在实际项目中，应该添加错误处理机制，例如检查元素是否存在，以及处理可能出现的异常。

总结

通过本文，你学习了如何使用 JavaScript 函数动态地添加 CSS 样式，避免了使用 document.write() 方法，并掌握了 appendChild 和 classList.add 等现代 Web 开发技术。通过将样式定义在 CSS 文件中，并使用 JavaScript 动态地为元素添加或删除类名，可以实现灵活且可维护的样式控制。记住，编写清晰、可维护的代码是 Web 开发的关键。