<p>data- 属性需配合 JavaScript 才能触发状态切换，dataset 是专为读写 data- 设计的 API，自动处理连字符转驼峰，CSS 切换需确保选择器、JS 设置目标和 HTML 挂载位置三者严格对齐。</p>
data-* 属性本身不会自动触发状态切换，必须配合 JavaScript 读取、修改，并驱动 DOM 或 CSS 响应 —— 直接写 data-liked="true" 不会变色、不隐藏元素、也不改变行为。
如何用 dataset 正确读写 data 属性
别用 getAttribute() 手动拼字符串，它大小写敏感、不处理连字符，容易出错；dataset 是专为 data-* 设计的 API，自动做 kebab-case → camelCase 转换。
-
button.dataset.liked读取data-liked（不是data-liked） -
button.dataset.userId = "123"写入后自动生成data-user-id="123" -
delete button.dataset.liked删除属性，比removeAttribute('data-liked')更语义清晰 - 如果属性名含数字或特殊字符（如
data-api-v2），dataset['api-v2']是唯一安全写法
为什么 data-theme 切换后样式没变
90% 的失效源于三处不匹配：CSS 选择器、JS 设置目标、HTML 挂载位置。三者缺一不可对齐。
- CSS 必须用
html[data-theme="dark"]，不能只写[data-theme="dark"]—— 权重不够，会被其他规则覆盖 - JS 必须调用
document.documentElement.setAttribute('data-theme', 'dark')，写在body或某个div上无效 - 初始化时若从
localStorage读到"theme-dark"，但 CSS 里是[data-theme="dark"]，就完全不匹配 - 变量必须定义在
:root，写在.card里，::before和position: fixed元素拿不到值
用 data- 控制显隐或行为时的容错要点
靠 data-active 或 data-status 驱动逻辑很常见，但 DOM 可能未就绪、属性可能不存在、值可能是空字符串而非 "false"。
立即学习“前端免费学习笔记（深入）”；
- 切换前先查元素是否存在：
const el = document.querySelector('[data-example-id="python"]'); if (!el) return; - 判断布尔状态别直接
== "true"，用el.hasAttribute('data-active')或el.dataset.active === "true" - 批量操作同组元素时，统一设
display: none再单独设目标为block，避免残留显示 - 服务端渲染时，建议初始 HTML 就带正确
data-active="true"，不要全靠 JS 补，否则首屏闪动
最常被忽略的是：data 属性只是“标记”，不是“开关”。它不自带逻辑，也不自动绑定事件或样式 —— 你得亲手写 JS 去监听、读取、响应，再手动更新 DOM 或触发重绘。漏掉初始化、写错选择器、挂错节点层级，都会让整个状态链断裂。
