网页如何使用自定义数据属性：Data-属性存储私有变量

data-*属性仅适用于存储用户可见、无需保密的辅助数据，因明文暴露、可被JS直接读写且无加密隔离机制；命名须全小写、用连字符分隔、data-后至少一字符，值恒为字符串；推荐用getAttribute/setAttribute操作，CSS中可用属性选择器和attr()函数渲染。

不能当私有变量用——data-* 属性是明文暴露在 DOM 中的，控制台里一查就见，JS 也能直接读写，不加密、不隔离、不防篡改。它只适合存“渲染需要、用户可见、无需保密”的辅助数据。

data-* 属性命名和写法有哪些硬性限制

浏览器对 data-* 的解析非常严格，错一个字符就失效：

• 必须全小写，data-UserId 或 data-userID 都不行，只能是 data-user-id
• 连字符 - 是唯一允许的分隔符，不能用下划线、驼峰或空格
• data- 后面至少得有一个字符，data- 单独写是无效的
• 值始终是字符串，哪怕你写 data-count="0"，取出来也是 "0"，不是数字 0

JavaScript 读写 data-* 推荐用 getAttribute / setAttribute

dataset 看起来方便，但容易踩坑：连字符会自动转驼峰（data-user-id → dataset.userId），而一旦属性名含数字或特殊组合（比如 data-2nd-place），dataset["2ndPlace"] 就无法访问；getAttribute 则无此限制，且兼容所有浏览器（包括旧版 IE）：

• 读取：el.getAttribute('data-user-id') —— 始终返回字符串，安全可靠
• 写入：el.setAttribute('data-is-active', 'false') —— 显式控制值类型，避免布尔隐式转换
• 删掉：el.removeAttribute('data-temp-flag') —— 比设为空字符串更干净

CSS 里怎么用 data-* 控制样式和内容

这是很多人忽略的实用场景：data 属性可直接参与 CSS 渲染，无需 JS 干预：

• 属性选择器匹配：button[data-loading="true"] { opacity: 0.6; pointer-events: none; }
• 用 attr() 把值显示出来：span::after { content: "×" attr(data-count); }，注意这里 attr() 只能取字符串，不能做计算
• 多个状态组合时别嵌套太深，比如 [data-status="active"][data-role="admin"] 可读性差，建议拆成独立类或用 JS 控制 class

真正要注意的是：不要指望 data-* 躲开用户——它不是隐藏字段，也不是服务端 session，任何想“藏点什么”的念头，都应该立刻转向后端 token 或加密 cookie。