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

使用 JavaScript 函数动态添加 CSS 样式可通过操作元素的类名或内联样式实现，推荐优先通过类名控制样式以提高代码可维护性。 以下是具体实现方法及示例：

1. 操作类名

   classList.add(className)：添加类名

   classList.remove(className)：移除类名

   classList.toggle(className)：切换类名存在状态优势：样式定义在 CSS 文件中，便于复用和维护。

2. 直接设置内联样式

   element.style.property = value：直接修改元素样式注意：内联样式优先级高但难以维护，建议仅在需要覆盖其他样式时使用。

1. 在 CSS 文件中定义样式

   .dynamic-box { width: 200px; height: 100px; background-color: #4CAF50; color: white; text-align: center; line-height: 100px; border-radius: 10px;}.highlight { box-shadow: 0 0 10px red;}

2. 通过 JavaScript 动态添加类名

   // 创建元素并添加类名const box = document.createElement('div');box.textContent = '动态样式示例';box.classList.add('dynamic-box');// 添加到 DOMdocument.body.appendChild(box);// 动态切换高亮效果setTimeout(() => { box.classList.toggle('highlight');}, 2000);

1. HTML 结构

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

2. CSS 样式

   .qr-window { display: flex; flex-direction: column; align-items: center; background-image: url("background.png"); background-size: cover; padding: 20px;}.qr-container { display: flex; justify-content: center; align-items: center; padding: 20px; border: 2px solid #ccc; border-radius: 10px; width: 400px;}.button-container button { margin: 0 5px; padding: 10px 20px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer;}

3. JavaScript 代码

   function openQRCodeWindow(registrationId, qrCodeImage, firstName, lastName) { 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 qrImage = document.createElement('img'); qrImage.src = qrCodeImage; qrImage.alt = "QR Code"; // 添加详情 const details = document.createElement('div'); details.innerHTML = ` <h3>Details</h3> <p>Registration ID: ${registrationId}</p> <p>Name: ${firstName} ${lastName}</p> `; // 添加按钮 const buttonContainer = document.createElement('div'); buttonContainer.classList.add('button-container'); const saveButton = document.createElement('button'); saveButton.textContent = 'Save Image'; const emailButton = document.createElement('button'); emailButton.textContent = 'Email'; // 组装元素 container.appendChild(qrImage); container.appendChild(details); buttonContainer.appendChild(saveButton); buttonContainer.appendChild(emailButton); qrWindow.appendChild(container); qrWindow.appendChild(buttonContainer); qrContainer.appendChild(qrWindow);}// 调用示例openQRCodeWindow( '12345', 'data:image/png;base64,...', 'John', 'Doe');

1. 避免使用 document.write()该方法会覆盖整个文档，不适用于动态内容加载。

2. 优先使用 CSS 类控制样式将样式定义在外部 CSS 文件中，通过 JavaScript 动态切换类名，实现样式与逻辑分离。

3. 性能优化

   批量操作 DOM 时，可使用 DocumentFragment 减少重绘。

   示例：const fragment = document.createDocumentFragment();for (let i = 0; i < 10; i++) { const div = document.createElement('div'); div.textContent = `Item ${i}`; fragment.appendChild(div);}document.body.appendChild(fragment);

4. 错误处理检查元素是否存在后再操作：

   const element = document.getElementById('non-existent');if (element) { element.classList.add('active');} else { console.error('元素未找到');}

通过 classList 操作类名或直接设置 style 属性，可灵活实现动态样式。推荐将样式定义在 CSS 中，利用 JavaScript 控制类名切换，以提升代码的可维护性和复用性。同时注意性能优化和错误处理，确保代码健壮性。