data-* 属性必须用短横线分隔，不能用驼峰；dataset 是只读的 DOMStringMap，修改需用 setAttribute()；获取值恒为字符串，需手动类型转换；含下划线等非法字符或需保留空白时应使用 getAttribute()。

data-* 属性必须用短横线分隔，不能直接写驼峰

HTML5 允许在任意元素上添加以 data- 开头的自定义属性，但命名有硬性规则：只能用小写字母、数字、短横线（-），且必须至少有一个短横线。比如 data-user-id 合法，datauserid 或 dataUserId 都不合法——浏览器会忽略后者，前者甚至不会被解析进 dataset。

原因在于 DOM 解析时，会把短横线后的字母自动转为驼峰形式映射到 dataset 对象上。所以：

• data-user-id → dataset.userId
• data-api-url → dataset.apiUrl
• data-abc-def-ghi → dataset.abcDefGhi

dataset 是只读对象，修改它不会同步回 HTML 属性

element.dataset 返回的是一个 DOMStringMap，看起来像普通对象，但它是只读代理。直接赋值如 el.dataset.foo = 'bar' 不会报错，但也不会生效；刷新页面后值就丢了。

要真正更新 DOM 属性，必须用 setAttribute()：

el.setAttribute('data-foo', 'new-value');

反过来，用 setAttribute() 更新后，dataset.foo 会立刻反映新值。这个单向同步关系常被误认为“双向绑定”，实际只是读取时自动映射。

dataset 获取值永远是字符串，注意类型转换

无论你在 HTML 里写 data-count="42" 还是 data-active="true"，通过 dataset.count 或 dataset.active 拿到的都是字符串 "42" 和 "true"，不是数字或布尔值。

常见踩坑场景：

• if (el.dataset.active === true) → 永远 false
• el.dataset.count + 1 → "421"（字符串拼接）

正确做法是显式转换：

const count = Number(el.dataset.count);
const isActive = el.dataset.active === 'true';

用 getAttribute() 更可靠，尤其处理含空格或特殊字符的 data 值

dataset 对短横线转驼峰的规则很严格，遇到 data-user-name 可以转成 dataset.userName，但一旦属性名含下划线、点号或连续短横线（如 data-user_name），dataset 就无法访问——它压根不会出现在对象里。

此时必须用传统方式：

el.getAttribute('data-user_name'); // 正确
// el.dataset.user_name → undefined

另外，如果值里含前后空格或换行符，dataset 会自动 trim，而 getAttribute() 返回原始字符串。对格式敏感的场景（比如 base64、JSON 片段），优先选后者。

# html  # js  # json  # html5  # 浏览器  # if  # count  # 字符串  # 类型转换  # 对象  # dom  # 下划线  # 的是  # 都是  # 都不  # 出现在  # 你在  # 它是  # 但也  # 自定义  # 会把 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel中的Facade(门面)到底是什么原理  Laravel怎么使用artisan命令缓存配置和视图  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  Laravel怎么实现搜索高亮功能_Laravel结合Scout与Algolia全文检索【实战】  百度输入法ai组件怎么删除 百度输入法ai组件移除工具  Python正则表达式进阶教程_复杂匹配与分组替换解析  javascript中闭包概念与用法深入理解  简单实现Android文件上传  Linux安全能力提升路径_长期防护思维说明【指导】  php json中文编码为null的解决办法  使用PHP下载CSS文件中的所有图片【几行代码即可实现】  网站制作软件免费下载安装,有哪些免费下载的软件网站？  如何快速搭建支持数据库操作的智能建站平台？  Laravel如何监控和管理失败的队列任务_Laravel失败任务处理与监控  原生JS获取元素集合的子元素宽度实例  如何快速搭建高效可靠的建站解决方案？  🚀拖拽式CMS建站能否实现高效与个性化并存？  如何快速生成橙子建站落地页链接？  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  Laravel如何实现用户角色和权限系统_Laravel角色权限管理机制  Laravel怎么在Blade中安全地输出原始HTML内容  深入理解Android中的xmlns:tools属性  ,交易猫的商品怎么发布到网站上去？  Win11怎么查看显卡温度 Win11任务管理器查看GPU温度【技巧】  Laravel如何实现多对多模型关联？（Eloquent教程）  PHP正则匹配日期和时间(时间戳转换)的实例代码  如何在不使用负向后查找的情况下匹配特定条件前的换行符  Android自定义listview布局实现上拉加载下拉刷新功能  DeepSeek是免费使用的吗 DeepSeek收费模式与Pro版本功能详解  Swift中循环语句中的转移语句 break 和 continue  零服务器AI建站解决方案：快速部署与云端平台低成本实践  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  如何快速登录WAP自助建站平台？  美食网站链接制作教程视频,哪个教做美食的网站比较专业点？  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  Laravel如何获取当前用户信息_Laravel Auth门面获取用户ID  如何在阿里云部署织梦网站？  VIVO手机上del键无效OnKeyListener不响应的原因及解决方法  Swift中swift中的switch 语句  C++时间戳转换成日期时间的步骤和示例代码  东莞专业网站制作公司有哪些,东莞招聘网站哪个好？  如何用AI帮你把自己的生活经历写成一个有趣的故事？  javascript基于原型链的继承及call和apply函数用法分析  Laravel如何实现用户密码重置功能？（完整流程代码）  Win11搜索不到蓝牙耳机怎么办 Win11蓝牙驱动更新修复【详解】  Laravel怎么使用Intervention Image库处理图片上传和缩放  如何快速搭建虚拟主机网站？新手必看指南  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  Laravel怎么实现模型属性转换Casting_Laravel自动将JSON字段转为数组【技巧】