如何通过 JavaScript 动态给 div 添加特定 CSS 类样式？

本文共计765个文字，预计阅读时间需要4分钟。

原文：

在前端开发中，动态为元素添加 CSS 类（如 active）是实现导航高亮、状态切换、交互反馈等常见需求的核心技术。但初学者常因混淆 DOM 查询方法而失败——正如示例中试图用 getElementsByClassName(id) 查找 ID 为 "felt" 的元素：该写法逻辑错误，因为 getElementsByClassName() 只能按类名查找，且返回的是 HTMLCollection，不能直接链式调用 classList；同时，id 是字符串，不是类名，传入后必然查无结果，导致脚本静默失败。

✅ 正确做法是：先精准获取目标元素，再操作其 classList。推荐使用 document.getElementById()（针对唯一 ID）或 document.querySelector()（支持 CSS 选择器，更灵活）：

<!-- 示例 HTML --> <nav> <a href="index.html" class="nav-link" id="home">首页</a> <a href="about.html" class="nav-link" id="about">关于</a> <a href="contact.html" class="nav-link" id="contact">联系</a> </nav>

// ✅ 方法1：通过 ID 获取元素（最简洁、性能最优） const activeLink = document.getElementById("about"); if (activeLink) { activeLink.classList.add("active"); } // ✅ 方法2：使用 querySelector（支持更复杂选择，如 .nav-link#about） document.querySelector(".nav-link#about").classList.add("active"); // ✅ 方法3：根据当前页面 URL 自动匹配并激活（实用场景） const currentPage = window.location.pathname.split('/').pop() || 'index.html'; const targetLink = document.querySelector(`a[href="${currentPage}"]`); if (targetLink) { targetLink.classList.add("active"); }

⚠️ 关键注意事项：

• 务必检查元素是否存在：getElementById() 在未找到时返回 null，直接调用 .classList.add() 会抛出 TypeError。建议增加 if (element) 判断；
• 避免重复添加：classList.add() 具有幂等性（重复添加同一类名不会报错，也不会产生冗余），但若需切换状态，可使用 classList.toggle("active") 或 classList.replace("old", "new")；
• 脚本执行时机：确保 DOM 已加载完成。将 <script> 放在 </body> 前，或使用 DOMContentLoaded 事件：

document.addEventListener("DOMContentLoaded", () => { const elem = document.getElementById("felt"); if (elem) elem.classList.add("active"); });

? 进阶提示：若需批量操作（如为多个导航项设置 active），可结合 querySelectorAll() 与循环：

立即学习“Java免费学习笔记（深入）”；

document.querySelectorAll(".nav-link").forEach(link => { if (link.href === window.location.href) { link.classList.add("active"); } else { link.classList.remove("active"); // 同时清除其他项的 active 状态 } });

掌握 element.classList.add() 这一模式，不仅能解决导航高亮问题，更是构建响应式、状态驱动 UI 的基石。坚持“先查后改、存在校验、时机可控”三原则，即可写出健壮可靠的 DOM 操作代码。