可使用HTML5的data-*属性存储自定义数据：在HTML中以data-为前缀声明，通过dataset API（自动驼峰转换）或getAttribute（读取原始值）访问，支持动态设置与删除，特殊字符名需用getAttribute。
如果您希望在HTML元素上存储自定义数据，而不影响文档结构或样式，则可以利用HTML5提供的data-*属性。以下是实现该目标的多种方法：
一、在HTML中声明data属性
data属性必须以data-为前缀，后接合法的名称（仅允许字母、数字、连字符、下划线和冒号，且不能包含大写字母）。浏览器会自动将带连字符的名称转换为驼峰命名格式供JavaScript读取。
1、在任意HTML元素上添加data属性，例如：
。
2、确保属性值为字符串类型；若需存储布尔或数值语义，后续需在JavaScript中手动转换。
立即学习“前端免费学习笔记（深入）”；
3、避免使用已存在的HTML全局属性名（如class、id、title等）作为data属性名的后缀。
二、使用dataset API读取data属性
dataset是Element接口的只读属性，返回一个DOMStringMap对象，其中键为去除data-前缀并转为驼峰格式的名称，值为对应属性的字符串值。
1、通过getElementById获取目标元素：const el = document.getElementById('user');。
2、访问dataset属性：const data = el.dataset;。
3、读取具体字段：console.log(data.userId); // 输出 "123"、console.log(data.userRole); // 输出 "admin"、console.log(data.isActive); // 输出 "true"。
三、使用getAttribute读取原始data属性值
getAttribute方法可直接获取未经过驼峰转换的原始属性值，适用于需要严格保留原始命名或处理特殊字符的场景。
1、获取元素引用：const el = document.getElementById('user');。
2、调用getAttribute并传入完整属性名：const userId = el.getAttribute('data-user-id');。
3、注意：该方法返回值始终为字符串，即使原值为数字或布尔字面量，也需手动转换类型，例如：parseInt(el.getAttribute('data-user-id')) 或 el.getAttribute('data-is-active') === 'true'。
四、动态设置与修改data属性
可通过dataset或setAttribute两种方式向元素写入或更新data属性，二者行为略有差异。
1、使用dataset赋值：el.dataset.userId = '456'; 会自动创建或更新data-user-id属性。
2、使用setAttribute赋值：el.setAttribute('data-user-score', '95.5'); 可写入含小数点或特殊符号的值，而dataset对某些字符支持有限。
3、删除data属性：delete el.dataset.userId; 或 el.removeAttribute('data-user-id');，前者仅在dataset映射中移除，后者真正从HTML中删除属性。
五、处理含特殊字符的data属性名
当data属性名包含点号（.）、括号（()）、空格或其他非标准字符时，dataset无法直接访问，必须使用getAttribute。
1、定义含点号的属性：。
2、dataset无法识别config.version，因其不符合驼峰转换规则；此时必须使用getAttribute(‘data-config.version’)。
3、同理，data-user["id"]、data-item-1等含方括号或数字开头的名称，均需绕过dataset，改用getAttribute读取。
以上就是html5怎样用data属性存数据_html5data属性使用与js读取方法【方法】的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1606704.html
微信扫一扫 
支付宝扫一扫 
