data-star 属性在 dataset 中对应 element.dataset.star,值为字符串"5";连字符转驼峰如 data-user-id→userId;不支持大写开头;不能用中括号或带data前缀访问;值恒为字符串需手动转换;设值应使用 setAttribute 而非直接赋 dataset。

data-star 属性名在 dataset 中变成 star
HTML 里写 data-star="5",JS 读 element.dataset.star 就能拿到字符串 "5"。dataset 会自动把 data- 前缀去掉,然后把连字符(-)转成驼峰(camelCase)——但 star 没有连字符,所以直接就是 star。
带连字符的 data-* 属性名要驼峰化
比如 data-user-id="123" → element.dataset.userId;data-api-key="abc" → element.dataset.apiKey。注意:dataset 不支持大写字母开头的键名,data-Star 这种写法是无效的,浏览器会忽略或转成小写再处理,结果不可靠。
常见错误现象:
-
element.dataset.dataStar—— 错,多写了data -
element.dataset["data-star"]—— 错,dataset 不支持中括号访问带连字符的原始名 -
element.dataset.star读出来是undefined,但 HTML 确实写了data-star→ 很可能是属性名拼错,比如写成data-start或漏了-
dataset 返回的值永远是字符串
哪怕你写 data-star="true" 或 data-star="0",element.dataset.star 拿到的仍是字符串 "true" 或 "0",不会自动转布尔或数字。
立即学习“前端免费学习笔记(深入)”;
需要手动转换:
- 转数字:
Number(element.dataset.star)或+element.dataset.star - 转布尔:
element.dataset.star === "true"(别用!!"false",它会得到true) - 空值判断:
element.dataset.star === ""表示属性存在但没赋值,element.dataset.star === undefined表示属性根本不存在
动态设置 data-star 要用 setAttribute,不能直接赋值
element.dataset.star = "4" 看似可行,但有坑:它只更新 dataset 缓存,不一定同步反映在 DOM 上(尤其在 SSR 或某些框架下),且无法触发 DOMSubtreeModified 类事件。
稳妥做法是:
- 设值用:
element.setAttribute("data-star", "4") - 删值用:
element.removeAttribute("data-star") - 读值仍用:
element.dataset.star(它会自动同步最新值)
dataset 是只读代理,直接赋值只是“看起来生效”,实际 DOM 属性可能滞后或不一致,调试时容易误判。



















