data-*属性名写对了仍读不到的根本原因是浏览器在HTML解析阶段就丢弃了非法命名的属性，dataset对象里压根不存在对应字段；必须满足以data-开头、后跟小写字母/数字/连字符、且至少含一个连字符三个条件。
data-*属性名为什么写对了还是读不到
根本原因不是 JS 写错了，是浏览器在 HTML 解析阶段就丢弃了该属性——只要命名不合法，dataset 对象里压根不会出现对应字段。
必须同时满足三个条件：以 data- 开头、后面只含小写字母/数字/连字符（-）、且至少含一个连字符。缺一不可。
-
data-user-id✅ 合法，映射为dataset.userId -
data-userId❌ 驼峰写法，被忽略 -
data_user_id❌ 下划线不触发驼峰转换，dataset.userId仍为undefined -
data-UserID❌ 大写字母直接导致整条属性被跳过 -
data-2024-report✅ 合法，但只能用dataset["2024Report"]访问（不能点号）
dataset自动转驼峰的规则到底是什么
不是“去掉短横线再首字母大写”，而是严格按连字符位置做大小写重映射：每个 - 后的第一个字母转大写，其余全部小写，且不保留原始大小写。
这个规则决定了你 JS 里怎么拼 key，拼错一个字母，就返回 undefined，还不报错。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
data-api-url→dataset.apiUrl（不是apiUrl或apiurl） -
data-xml-ns→dataset.xmlNs（xml是保留前缀，ns单独大写） -
data-last-modified-at→dataset.lastModifiedAt（每段都转，不只是第一个-） -
data-addval→dataset.addval（无连字符，全小写访问）
setAttribute 和 dataset 混用会出什么问题
dataset 是只读代理，不是双向绑定。它只是读取时的语法糖，写入必须走 setAttribute 才能真正更新 DOM 属性。
混用会导致状态不一致：改了 dataset.foo，再调 setAttribute('data-foo', 'bar')，dataset.foo 还是旧值；反之亦然。
- 读取优先用
element.dataset.xxx（语义清晰、自动驼峰） - 写入必须用
element.setAttribute('data-xxx', 'value')（否则不生效） - 删属性用
element.removeAttribute('data-xxx')，不要用delete element.dataset.xxx（无效） - 特殊场景（如下划线、点号、空格）一律用
getAttribute('data-xxx')兜底
值永远是字符串，类型转换必须手动处理
dataset 不做任何类型推断。哪怕你在 HTML 里写 data-count="42"，读出来仍是字符串 "42"；data-active="false" 读出来是 "false"，不是布尔值 false。
常见错误：if (el.dataset.active) 总是 true（只要属性存在），el.dataset.count + 1 得到 "421"（字符串拼接）。
- 数字：用
Number(el.dataset.count)或parseInt() - 布尔：用
el.dataset.flag === "true"判断，别信Boolean() - 对象/数组：存前
JSON.stringify()，读出后JSON.parse()，且必须判空 - 敏感信息（token、手机号、密码）绝对不要放
data-*，源码明文可见
