HTML5中data-*属性是实现前后端规格数据双向对齐的关键载体，通过data-spec标识维度、data-value存储后台原始值，确保语义一致、可解析、可扩展。
HTML5 中没有 data 标签，但有 data-* 自定义属性（如 data-spec="color"、data-value="blue"），这是实现前端规格与后台数据结构化映射的关键载体。所谓“双向对齐”，不是自动同步，而是通过统一的数据契约，让前端能准确读取后台返回的规格组合、库存状态等信息，同时提交时也能按约定格式回传——核心在于语义一致、可解析、可扩展。
data-* 属性如何承载规格参数
后台返回商品数据时，应附带明确的规格维度和有效组合（例如 JSON）：
{
"sku_list": [
{ "id": "1001", "color": "red", "size": "M", "stock": 12 },
{ "id": "1002", "color": "red", "size": "L", "stock": 0 },
{ "id": "1003", "color": "blue", "size": "M", "stock": 8 }
]
}前端渲染规格选择器时，用 data-* 把每个维度值“打标”：
<!-- 颜色组 --> <fieldset> <legend>颜色</legend> <label><input type="radio" name="color" value="red" data-spec="color" data-value="red"> 红色</label> <label><input type="radio" name="color" value="blue" data-spec="color" data-value="blue"> 蓝色</label> </fieldset> <!-- 尺码组 --> <fieldset> <legend>尺码</legend> <label><input type="radio" name="size" value="M" data-spec="size" data-value="M"> M</label> <label><input type="radio" name="size" value="L" data-spec="size" data-value="L"> L</label> </fieldset>
-
data-spec标明该控件所属规格类型（避免用 class 名如.color-radio做逻辑判断） -
data-value使用后台返回的原始值（如"red"而非"红色"），确保 JS 可直接比对 - 所有规格项都带
name，方便用document.querySelectorAll('[name="color"]')批量获取
如何实现“双向对齐”
-
前端读取后台数据 → 启用/禁用对应选项
JS 加载sku_list后，遍历所有已选规格组合，查出哪些(color, size)存在且有库存，再用data-value匹配并启用对应 radio：const available = new Set( skuList.filter(s => s.stock > 0).map(s => `${s.color}-${s.size}`) ); document.querySelectorAll('[name="color"], [name="size"]').forEach(el => { const spec = el.dataset.spec; const val = el.dataset.value; // 当前选中 color=red，需检查 red-M、red-L 是否存在 const isActive = Array.from(document.querySelectorAll(`[name="size"]`)) .some(sizeEl => available.has(`${val}-${sizeEl.dataset.value}`)); el.closest('label').setAttribute('aria-disabled', !isActive); }); -
用户选择后 → 构造后台可识别的提交结构
提交前收集所有已选data-spec和data-value，组装为对象，不依赖中文文本或 DOM 顺序：const selection = {}; document.querySelectorAll('input[type="radio"]:checked').forEach(el => { selection[el.dataset.spec] = el.dataset.value; }); // → { color: "red", size: "M" } -
后台返回当前 SKU ID → 前端高亮已选规格并显示价格/库存
若后台返回{ sku_id: "1001", price: 299, stock: 12 }，前端用data-value反向定位 radio 并 checked，再更新 UI：Object.entries({ color: "red", size: "M" }).forEach(([spec, val]) => { document.querySelector(`[data-spec="${spec}"][data-value="${val}"]`).checked = true; });
关键避坑点
- 不要用
innerText或textContent提取“红色”去匹配后台"red"—— 中文不可靠，翻译、空格、全角半角都会断链 - 不要给
input设disabled属性来禁用选项 —— 它会跳过表单提交，且无法用 CSS 统一控制禁用态样式；改用aria-disabled="true"+ CSS[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } - 不要把规格值硬编码进 JS（如
if (color === 'red') { enableSize(['M', 'L']) }）—— 这样每加一个新颜色就要改代码；全部由sku_list动态驱动
不复杂但容易忽略
立即学习“前端免费学习笔记（深入）”；
