HTML5的dataset属性可通过data-*自定义数据并用JavaScript操作，支持读取、修改、添加和删除；例如data-user-id在JS中转为userId（驼峰命名），实现DOM与数据的便捷交互。
HTML5 的 dataset 属性提供了一种标准方式来存储和访问自定义数据，这些数据可以直接嵌入在 HTML 元素中，便于 JavaScript 操作。它通过使用以 data- 开头的属性实现，统称为“数据属性”。
在 HTML 元素上添加以 data- 开头的属性，用于存放自定义数据。属性名只能包含字母、数字、连字符（-）、点（.）、下划线（_）和中文等字符，但不能有大写字母。
例如：<div id="user" data-name="张三" data-age="28" data-user-id="12345"></div>
上面的代码定义了三个自定义数据：姓名、年龄和用户ID。
通过元素的 dataset 属性可以访问所有 data- 定义的数据。注意：属性名中的连字符后接的字母会转换为驼峰命名法（kebab-case → camelCase）。
立即学习“前端免费学习笔记（深入）”；
JavaScript 示例：
<code>const userElement = document.getElementById('user');
console.log(userElement.dataset.name); // 输出: 张三
console.log(userElement.dataset.age); // 输出: 28
console.log(userElement.dataset.userId); // 输出: 12345（data-user-id → userId）data-user-id 被自动转换为 userId，这是 dataset 的命名规则。
你可以直接给 dataset 中的属性赋值，来更新或添加新的自定义数据。
citySHOP是一款集CMS、网店、商品、系统，管理更加科学快速；全新Jquery前端引擎；智能缓存、图表化的数据分析，手机短信营销；各种礼包设置、搭配购买、关联等进一步加强用户体验；任何功能及设置都高度自定义；MVC架构模式，代码严禁、规范；商品推荐、促销、礼包、折扣、换购等多种设置模式；商品五级分类，可自由设置分类属性；商品展示页简介大方，清晰，图片自动放大，无需重开页面；商品评价、咨询分开
15
userElement.dataset.age = "30"; userElement.dataset.city = "北京";
执行后，HTML 会自动更新为：
<div id="user" data-name="张三" data-age="30" data-user-id="12345" data-city="北京"></div>
说明 dataset 支持动态增删改数据属性。
删除某个 data 属性，可使用 delete 操作符：
delete userElement.dataset.city;
执行后，data-city 属性将从元素中移除。
基本上就这些。dataset 让你在 HTML 和 JavaScript 之间传递自定义数据变得简单直观，避免了使用类名或隐藏 input 来存储额外信息的麻烦。只要记得命名规范和大小写转换，用起来很顺手。
以上就是HTML5数据集属性怎么用_HTML5dataset属性操作自定义数据的方法的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
572
收藏
