html自定义数据属性传参需以data-开头、用连字符分隔，javascript通过dataset读取（自动转驼峰）或getattribute获取，设置用setattribute，避免存敏感信息及对象，检测存在性用'in'操作符。

HTML 中用自定义数据属性传参，核心就是写 data-* 属性 + 用 JavaScript 读取，不复杂但容易忽略细节。

怎么在按钮上加 data-* 参数

必须以 data- 开头，后面跟合法字符（字母、数字、连字符），多个单词用连字符分隔：

• 正确写法：<button data-user-id="88" data-action="edit">编辑</button>
• 错误写法：<button user-id="88"></button>（浏览器直接忽略）、<button datauserid="88"></button>（没连字符，dataset 读不到）
• 属性值始终是字符串，哪怕写 data-count="5"，JS 里拿到的也是 "5"，需要手动转类型

怎么用 JavaScript 读取这些参数

推荐用 dataset，语义清晰、自动处理命名转换：

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• btn.dataset.userId → 对应 data-user-id
• btn.dataset.action → 对应 data-action
• 连字符自动转驼峰，data-api-key → dataset.apiKey
• 如果要原样读名或兼容旧浏览器，可用 btn.getAttribute('data-user-id')

怎么动态设置或修改 data-* 属性

静态写在 HTML 里最简单；运行时新增或改值，要用 setAttribute：

• ✅ 正确：btn.setAttribute('data-status', 'pending')
• ❌ 错误：btn.dataset.status = 'pending'（首次设置无效，只对已有属性生效）
• 删除属性用：btn.removeAttribute('data-user-id') 或 delete btn.dataset.userId

哪些坑要避开

看似简单，但几个常见误区会导致取不到值或逻辑出错：

• 别存敏感信息——data-token="abc123" 会明文暴露在 DOM 里
• 别存对象或数组——data-config='{"mode":"dark"}' 可以，但得自己 JSON.parse()；直接赋对象会变成 "[object Object]"
• 检测属性是否存在，用 'userId' in btn.dataset，而不是 btn.dataset.userId !== undefined（空字符串也会返回 false）
• 避免和标准属性冲突，比如不要写 data-class 或 data-id（虽然能设，但易混淆）

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！