本文旨在指导开发者如何使用 JavaScript 函数动态地向 HTML 元素添加 CSS 样式，避免使用 `document.write()`，并采用 `appendChild` 和 `classList.add` 等更现代、更安全的方法。通过示例代码和详细解释，帮助读者理解如何在 JavaScript 中高效地操作 CSS 样式，从而实现更灵活和可维护的前端代码。
避免使用 document.write()
document.write() 方法在现代 Web 开发中已不推荐使用。它可能会导致页面加载性能问题，并且在某些情况下会覆盖现有的 HTML 结构，导致不可预测的行为。因此，我们应该寻找替代方案。
使用 appendChild 创建和添加元素
appendChild 方法允许我们动态地创建 HTML 元素，并将其添加到 DOM 树中。这是一种更安全、更灵活的方式来构建页面内容。
例如，要创建一个
元素并将其添加到 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 的元素。然后，它创建一个新的
元素，设置其文本内容为 “ABC”，并使用 appendChild 将其添加到 qr-container 中。
使用 classList.add 添加 CSS 类
为了应用 CSS 样式，我们可以使用 classList.add 方法向元素添加 CSS 类。这使得我们可以将样式定义与 JavaScript 代码分离，从而提高代码的可维护性。
vizcom.ai
AI草图渲染工具，快速将手绘草图渲染成精美的图像
70 查看详情
例如，要向上面创建的
元素添加一个名为 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;}
这样，
元素的文本颜色就会变成红色。
完整示例
将上述概念整合，我们可以创建一个更完整的示例，动态地创建包含样式的 QR 码信息：
Dynamic QR Code .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; }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);
代码解释：
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 样式：最佳实践指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/725758.html
微信扫一扫 
支付宝扫一扫 
