<p>JavaScript 中应使用 data- 前缀设置自定义属性，如 setAttribute('data-user-id', '123')，以确保合规性和可读性；读取时优先用 dataset.userId 获取，并注意值恒为字符串。</p>
在 JavaScript 中，setAttribute 可以直接设置自定义属性（即非标准 HTML 属性），但要注意命名规范和浏览器兼容性。自定义属性推荐使用 data- 前缀，这是 HTML5 官方支持的方式，能确保语义正确、可被 CSS 选择器和 JS 安全读取。
用 data- 前缀设置自定义属性
HTML5 规定，所有以 data- 开头的属性都是合法的自定义属性。JavaScript 中用 setAttribute 设置时，名称需完整包含 data-：
-
✅ 正确写法：
element.setAttribute('data-user-id', '123') -
✅ 正确写法：
element.setAttribute('data-is-active', 'true') -
❌ 不推荐（无 data- 前缀）：
element.setAttribute('userid', '123')—— 虽然能设上，但不符合规范，可能被校验工具警告，且无法通过dataset访问
设置后如何读取？优先用 dataset
设置了 data- 属性后，推荐用 element.dataset 读取，它会自动处理驼峰转换：
-
element.setAttribute('data-user-id', '123')→element.dataset.userId返回'123' -
element.setAttribute('data-api-url', 'https://api.example.com')→element.dataset.apiUrl返回'https://api.example.com' - 注意：
dataset只对data-属性生效，普通属性如title或自定义无前缀属性不会出现在dataset中
不带 data- 的“纯自定义属性”也能设，但有局限
技术上你可以用 setAttribute('my-flag', 'on') 设置任意名字的属性，浏览器不会报错，但：
立即学习“Java免费学习笔记（深入）”；
- 该属性不会出现在
element.dataset中 - 无法用 CSS 的
[my-flag]选择器可靠匹配（部分老浏览器不支持） - 不符合 HTML 标准，可能影响可访问性或未来兼容性
- 若只是临时存数据，更推荐用
element.myCustomProp = value（仅 JS 运行时有效，不反映在 DOM 中）
小提醒：值总是字符串类型
setAttribute 的第二个参数会被自动转为字符串：
-
element.setAttribute('data-count', 42)→ 实际存的是字符串"42" -
element.setAttribute('data-active', true)→ 存的是"true"，不是布尔值true - 需要布尔逻辑时，建议用
element.hasAttribute('data-active')判断是否存在，或显式解析：JSON.parse(element.getAttribute('data-active'))
