使用 JavaScript 函数动态添加 CSS 样式-js教程-PHP中文网

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

碧海醫心

发布： 2025-10-19 11:20:02

原创

855人浏览过

使用 javascript 函数动态添加 css 样式

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

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

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

以下是几种常用的方法：

classList.add(className): 向元素的 classList 属性添加指定的类名。
classList.remove(className): 从元素的 classList 属性移除指定的类名。
classList.toggle(className): 如果元素的 classList 属性中存在指定的类名，则移除它；否则，添加它。
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 代码:

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>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9454">
                            <img src="https://img.php.cn/upload/webcode/000/000/012/175902480515433.jpg" alt="漂亮的电子企业网站1.2">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9454">漂亮的电子企业网站1.2</a>
                            <p>这是一个免费的企业网站系统，任何人可以免费下载、修改和使用本程序，也可以用来为企业建网站。没有任何功能限制，且不发布收费版。容兴免费企业网站系统后台功能简介：1.基本设置：基本信息，联系方式，网站设置，导航管理，模块启闭，静态设置，安全设置，数据库管理2.产品管理：产品列表，添加产品，产品分类3.文章管理：文章列表，发表文章，文章分类，公司简介，网站公告4.客服互动：留言管理，在线客服，友情链接5</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="漂亮的电子企业网站1.2">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9454" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="漂亮的电子企业网站1.2">
                        </a>
                    </div>
                
    <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);

登录后复制

代码解释:

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

注意事项

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

总结

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

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