开会员与付费前请必须阅读这篇文章，在首页置顶第一篇：（进站必看本站VIP介绍/购买须知）
本站所有源码均为自动秒发货，默认（百度网盘）
本站所有源码均为自动秒发货，默认（百度网盘）
在前端开发中，我们经常需要在 HTML 元素上存储一些额外的数据，这些数据不影响页面展示，但对 JavaScript 逻辑处理至关重要。早期开发者会滥用
id、class 或自定义非标准属性来实现，不仅不符合 HTML 规范，还容易引发样式冲突、属性命名冲突等问题。HTML5 推出的
data-* 自定义属性 完美解决了这个痛点，它是标准的、无侵入的元素数据存储方案，也是前端开发中必备的基础技能。本文将带你全面掌握 data-* 的用法、核心场景、操作技巧及注意事项，让你的代码更规范、更易维护。一、什么是 data-* 自定义属性
data-* 是 HTML5 标准定义的自定义数据属性，用于在 HTML 元素上存储私有自定义数据，这些数据对用户不可见，也不会影响页面布局和样式。核心规则
- 属性名必须以
data-开头； data-后面的名称只能包含小写字母、数字、连字符 (-)、下划线 (_)、点 (.)，不能包含大写字母；- 一个元素可以设置多个
data-*属性； - 存储的值可以是字符串、数字、JSON 字符串等任意文本格式。
标准写法示例
html
预览
<!-- 单个 data-* 属性 -->
<div data-user-id="1001">用户卡片</div>
<!-- 多个 data-* 属性 -->
<button
data-action="delete"
data-target-id="666"
data-is-enabled="true"
>删除</button>
二、data-* 的两种操作方式
操作
data-* 属性有两种方式：原生 JavaScript 操作 和 jQuery 简化操作，日常开发优先推荐原生方案。1. 原生 JavaScript 操作（推荐）
原生 JS 提供了两种操作
data-* 的方法：getAttribute/setAttribute 和 dataset API。（1）dataset API（最简洁）
HTML5 专门为
data-* 属性提供了 dataset 对象，自动去除 data- 前缀，连字符命名会自动转为驼峰命名。✅ 语法：
- 获取：
元素.dataset.属性名(驼峰) - 设置：
元素.dataset.属性名(驼峰) = 新值 - 删除：
delete 元素.dataset.属性名(驼峰)
📌 实战代码：
html
预览
<div id="userCard" data-user-name="张三" data-user-age="25">用户信息</div>
<script>
const card = document.getElementById('userCard');
// 1. 获取属性值（连字符转驼峰：data-user-age → userAge）
console.log(card.dataset.userName); // 输出：张三
console.log(card.dataset.userAge); // 输出：25（字符串类型）
// 2. 设置属性值
card.dataset.userAge = 26;
card.dataset.userGender = '男'; // 新增自定义属性
// 3. 删除属性
delete card.dataset.userName;
</script>
（2）getAttribute /setAttribute（兼容所有浏览器）
如果需要兼容极老版本浏览器，可使用原生属性操作方法，必须写完整属性名。
javascript
运行
// 获取
const name = card.getAttribute('data-user-name');
// 设置
card.setAttribute('data-user-name', '李四');
// 删除
card.removeAttribute('data-user-name');
2. jQuery 操作 data () 方法
jQuery 对
data-* 做了封装，使用 data() 方法可直接读写，自动解析数据类型。html
预览
<div id="test" data-info="hello" data-num="10"></div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
// 获取
console.log($('#test').data('info')); // hello
console.log($('#test').data('num')); // 10（自动转为数字）
// 设置
$('#test').data('info', '你好');
</script>
三、data-* 高频使用场景（实战必备）
data-* 的核心价值是无侵入存储数据，以下是前端开发中最常用的 5 大场景，覆盖绝大多数业务需求。场景 1：存储列表 / 组件唯一标识
在渲染列表、卡片、菜单时，存储数据 ID、类型等标识，点击时快速获取，无需 DOM 遍历或全局变量。
html
预览
<!-- 商品列表，存储商品ID和类型 -->
<ul class="goods-list">
<li data-goods-id="100" data-goods-type="electronics">手机</li>
<li data-goods-id="101" data-goods-type="clothes">T恤</li>
</ul>
<script>
// 点击商品，获取对应ID
document.querySelectorAll('.goods-list li').forEach(item => {
item.addEventListener('click', () => {
const id = item.dataset.goodsId;
const type = item.dataset.goodsType;
console.log(`查看商品：ID=${id}，类型=${type}`);
});
});
</script>
场景 2：传递配置参数给 JS 逻辑
把组件的配置参数写在 HTML 上，JS 动态读取，实现组件复用、配置与逻辑分离。
html
预览
<!-- 轮播图组件，配置参数 -->
<div
class="carousel"
data-autoplay="true"
data-interval="3000"
data-dot-show="false"
></div>
<script>
const carousel = document.querySelector('.carousel');
// 读取配置初始化组件
const autoplay = carousel.dataset.autoplay === 'true';
const interval = Number(carousel.dataset.interval);
initCarousel(autoplay, interval);
</script>
场景 3：配合 CSS 做样式控制
data-* 是标准属性，可直接作为 CSS 选择器，实现数据驱动样式。html
预览
<!-- 按钮状态：禁用/激活 -->
<button data-state="disabled">提交</button>
<button data-state="active">提交</button>
<style>
/* 根据 data-state 切换样式 */
button[data-state="disabled"] {
background: #ccc;
cursor: not-allowed;
}
button[data-state="active"] {
background: #409eff;
cursor: pointer;
}
</style>
场景 4：存储复杂数据（JSON 字符串）
data-* 可以存储 JSON 字符串，JS 解析后直接使用，适合传递对象 / 数组数据。html
预览
<div
id="complexData"
data-user='{"name":"张三","age":25,"hobby":["编程","跑步"]}'
></div>
<script>
const el = document.getElementById('complexData');
// 解析 JSON 字符串为对象
const user = JSON.parse(el.dataset.user);
console.log(user.name); // 张三
console.log(user.hobby[0]); // 编程
</script>
场景 5：表单 / 交互状态标记
存储表单验证状态、弹窗标识、操作类型等，替代全局变量。
html
预览
<input
type="text"
data-validate-status="error"
data-error-msg="请输入正确手机号"
>
四、data-* 注意事项（避坑指南）
-
数据类型统一为字符串
dataset获取的值全部是字符串类型，数字、布尔值需要手动转换：javascript运行const age = Number(card.dataset.userAge); // 转数字 const isEnabled = card.dataset.isEnabled === 'true'; // 转布尔 -
属性命名禁止大写
❌ 错误：
dataUserName✅ 正确：
data-user-name（自动转为驼峰userName） -
不要存储敏感信息
data-*属性可以在浏览器控制台、页面源码中查看，绝对不能存储密码、token、密钥等敏感数据。 -
不用于样式展示
data-*是数据存储属性，不是样式属性，不要用它替代class、style做样式开发。 -
dataset 与 getAttribute 区别
dataset只能操作data-*属性，语法简洁；getAttribute可以操作所有 HTML 属性，兼容性更好。
五、data-* 优势总结
- 符合 HTML5 标准，无兼容性问题（支持所有现代浏览器 + IE11+）；
- 无侵入性，不影响页面展示、样式和语义化；
- JS 操作便捷，
datasetAPI 极简易用； - 解耦数据与视图，让代码更规范、易维护；
- CSS 可直接选中，实现数据驱动样式。
结语
data-* 自定义属性是前端开发中轻量、标准、实用的数据存储方案，从列表渲染、组件配置到交互状态标记，都能发挥重要作用。掌握它的核心用法和场景，能让你的代码告别冗余的全局变量和非标准属性，大幅提升代码质量和可维护性。日常开发中，优先使用
dataset API 操作，遵循命名规范，避开敏感数据存储的坑，就能高效使用这个特性。本文总结
data-*是 HTML5 标准自定义数据属性，必须以data-开头；- 原生 JS 用
dataset（驼峰命名）操作最简洁，jQuery 用data()方法； - 核心场景：标识存储、组件配置、数据驱动样式、复杂数据传递；
- 注意：值为字符串、不存敏感信息、命名禁止大写、不用于样式开发。
我是前端开发爱好者，专注分享前端基础、实战技巧、避坑指南，欢迎点赞、收藏、关注，后续持续更新更多干货！
