HTML数据属性（data-*）用于存储私有数据、增强交互逻辑、实现动态样式及组件通信。1. 可在元素上存储如data-id等自定义信息，通过dataset读取；2. 用data-liked控制按钮状态，简化JS逻辑；3. 结合CSS属性选择器为不同data值添加视觉标识；4. 作为组件间轻量级配置传递方式，提升解耦性与可维护性。
HTML数据属性（data-*）是HTML5引入的自定义属性，允许开发者在元素上存储额外信息，而不影响样式或布局。这些属性以 data- 开头，后接自定义名称，比如 data-id、data-status 等。它们不会被浏览器渲染，但可通过JavaScript或CSS轻松读取和操作。
1. 存储与DOM元素相关的私有数据
当需要为某个HTML元素附加一些不希望直接暴露在class或id中的信息时，data属性非常实用。
- 例如，在商品列表中每个商品项可以携带价格、库存状态等信息：
T-Shirt
JavaScript可以这样读取：
const product = document.querySelector('.product');
console.log(product.dataset.price); // 输出: 29.99
console.log(product.dataset.inStock); // 注意驼峰命名：in-stock → inStock
2. 增强JavaScript交互逻辑
data属性常用于控制行为或状态切换，避免使用全局变量或复杂选择器。
立即学习“前端免费学习笔记（深入）”；
- 比如实现一个按钮切换“点赞”状态：
对应的JS函数：
function toggleLike(btn) {
const isLiked = btn.dataset.liked === 'true';
btn.dataset.liked = !isLiked;
btn.textContent = !isLiked ? '❤️ 已赞' : '? 赞';
}
这种方式让状态管理更直观，且无需额外的数组或对象追踪每个按钮状态。
3. 与CSS结合实现动态样式
data属性可配合伪类 ::before 或属性选择器，在不改变结构的前提下添加视觉反馈。
- 例如根据任务状态显示标签：
待处理任务已完成任务
CSS中使用属性选择器：
.task[data-status="pending"]::before {
content: "⏳ ";
}
.task[data-status="done"]::before {
content: "✅ ";
}
这样就能通过语义化的方式控制展示效果，提升可维护性。
4. 模块化组件通信的数据载体
在构建可复用组件时，data属性是一种轻量级的配置方式。
- 比如模态框组件可以通过data属性指定目标内容或动画类型：
查看新闻
JavaScript获取并执行对应逻辑：
document.querySelectorAll('[data-modal-target]').forEach(link => {
link.addEventListener('click', e => {
e.preventDefault();
const target = link.dataset.modalTarget;
const anim = link.dataset.animation;
openModal(target, anim);
});
});
这种模式提升了组件的灵活性和解耦程度。
基本上就这些。data属性不是万能的，但它在保持HTML语义清晰的同时，为前端开发提供了简洁有效的数据传递手段。合理使用，能让代码更易读、更易维护。不复杂但容易忽略。
