使用 JavaScript 函数动态添加 CSS 样式：最佳实践指南-js教程-PHP中文网

使用 JavaScript 函数动态添加 CSS 样式：最佳实践指南

DDD

发布： 2025-10-19 11:45:06

原创

427人浏览过

使用 javascript 函数动态添加 css 样式：最佳实践指南

本文旨在指导开发者如何使用 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 类，可以这样做：

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

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 代码分离，以获得更好的代码组织和可读性。

以上就是使用 JavaScript 函数动态添加 CSS 样式：最佳实践指南的详细内容，更多请关注php中文网其它相关文章！