本文介绍了如何在 JavaScript 函数中动态地为 HTML 元素添加 CSS 样式。避免使用 `document.write()`，推荐使用 `createElement` 和 `appendChild` 方法创建元素，并通过 `classList.add` 方法添加 CSS 类名，实现样式与逻辑的分离，从而提高代码的可维护性和可读性。同时，展示了将 CSS 样式定义在外部 CSS 文件中，并在 JavaScript 中引用这些样式类的最佳实践。
在 Web 开发中，经常需要在 JavaScript 函数中动态地创建 HTML 元素，并为其应用特定的 CSS 样式。直接在 JavaScript 代码中使用内联样式不仅难以维护，而且会降低代码的可读性。本文将介绍一种更优雅、更推荐的方法，即使用 createElement、appendChild 和 classList.add 方法，将 CSS 样式定义在外部 CSS 文件中，然后在 JavaScript 中引用这些样式类。
避免使用 document.write()
首先，强烈建议避免使用 document.write() 方法。正如 MDN 文档所指出的，document.write() 存在一些问题，可能会导致页面加载缓慢甚至出现错误。
使用 createElement 和 appendChild 创建元素
更好的方法是使用 createElement 创建 HTML 元素，然后使用 appendChild 将其添加到 DOM 树中。例如：
立即学习“Java免费学习笔记（深入）”；
function openQRCodeWindow(registrationId) { const container = document.querySelector('.qr-container'); const titleElement = document.createElement('h1'); titleElement.textContent = 'ABC'; container.appendChild(titleElement);}openQRCodeWindow('')
这段代码首先获取了 class 为 qr-container 的 HTML 元素，然后创建了一个 h1 元素，并设置其文本内容为 “ABC”，最后将该 h1 元素添加到 qr-container 中。
使用 classList.add 添加 CSS 类名
接下来，可以使用 classList.add 方法为元素添加 CSS 类名。这样可以将样式定义与 JavaScript 逻辑分离，提高代码的可维护性。
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('')
在这个例子中，我们为 h1 元素添加了 title 类。
在 CSS 文件中定义样式
现在，可以在 CSS 文件中定义 title 类的样式。例如：
.title { color: red;}
这段 CSS 代码将所有 class 为 title 的元素的颜色设置为红色。
完整示例
以下是一个完整的示例，展示了如何在 JavaScript 函数中动态地创建 HTML 元素，并为其应用 CSS 样式：
HTML:
JavaScript:
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 { color: red;}
这段代码将在 qr-container 中创建一个红色的 h1 元素，内容为 “ABC”。
总结
通过使用 createElement、appendChild 和 classList.add 方法，可以将 CSS 样式定义与 JavaScript 逻辑分离，提高代码的可维护性和可读性。这种方法也更符合 Web 开发的最佳实践。避免使用 document.write()，并尽可能将样式定义在外部 CSS 文件中，可以使代码更加清晰、易于理解和修改。
以上就是如何在 JavaScript 函数中应用 CSS 样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1530906.html
微信扫一扫 
支付宝扫一扫 
