本文详解 classList.add() 无效的常见原因（主要是 DOM 加载时机问题），并提供三种可靠解决方案：脚本位置调整、defer 属性、以及 DOMContentLoaded 事件监听，确保类名准确添加。
本文详解 `classlist.add()` 无效的常见原因（主要是 dom 加载时机问题），并提供三种可靠解决方案：脚本位置调整、`defer` 属性、以及 `domcontentloaded` 事件监听，确保类名准确添加。
在前端开发中，使用 element.classList.add('active') 为元素动态添加 CSS 类是操作 DOM 的基础技能。但初学者常遇到“点击按钮后样式无变化”的问题——代码逻辑看似正确，实际却未生效。根本原因往往不是语法错误，而是 JavaScript 在 DOM 元素尚未加载完成时就已执行，导致 document.querySelector() 返回 null，后续调用 .classList.add() 报错或静默失败。
以下以一个典型场景为例：点击按钮，为
添加 active 类，使其显示弹窗效果。
✅ 正确做法一：将脚本置于 HTML 底部（推荐新手）
确保 DOM 已解析完毕再执行脚本，最直观的方式是把 <script> 标签放在 </script>
