本文详解如何通过 `dataset` api 准确获取 html 元素中 `data-value` 属性的值，解决重复赋值、取值错误等问题，并提供可直接运行的示例代码与关键注意事项。
在前端开发中，常需通过点击操作动态获取自定义数据（如价格），但初学者容易混淆 value 属性与 data-* 属性的访问方式。你提供的代码中使用了 e.target.value，但 <li> 元素默认没有 value 属性（value 仅对 <input>、<button>、<option> 等表单控件原生有效），因此 e.target.value 返回 undefined，导致无法正确读取 20、250 等数值。
✅ 正确做法是：使用 element.dataset.value 访问 data-value 自定义属性。浏览器会自动将 data- 前缀移除，并将连字符转为驼峰命名（如 data-user-id → dataset.userId）。本例中 data-value 直接对应 dataset.value。
以下是优化后的完整可运行代码：
<ul class="money">
<li class="price" data-value="20">20 ฿</li>
<li class="price" data-value="50">50 ฿</li>
<li class="price" data-value="100">100 ฿</li>
<li class="price" data-value="250">250 ฿</li>
</ul>
<script>
const prices = document.querySelectorAll('.price');
let selectedValue = null; // 全局存储当前选中的值（可选）
prices.forEach(price => {
price.addEventListener('click', e => {
// 移除所有 .active 类，再为当前项添加
prices.forEach(el => el.classList.remove('active'));
e.target.classList.add('active');
// ✅ 正确获取 data-value 的值（字符串类型）
const currentValue = e.target.dataset.value;
console.log('当前选中金额：', currentValue); // 输出：'20'、'250' 等字符串
// 若需数值类型，可显式转换：
const numericValue = Number(currentValue);
console.log('数值化结果：', numericValue); // 输出：20、250 等 number
// 可选：保存到变量或触发后续逻辑（如提交表单、更新总价）
selectedValue = numericValue;
});
});
</script>⚠️ 注意事项：
- dataset.value 返回的是字符串，如需参与数学运算，请用 Number()、parseInt() 或一元加号 +currentValue 转换；
- 确保 HTML 中 data-value 属性拼写正确（区分大小写），且无空格或非法字符；
- 不要遗漏 </ul> 闭合标签（你原始代码中嵌套有误，已修正）；
- 若需持久化选中状态或跨函数使用该值，建议声明外部变量（如 selectedValue）或使用 localStorage；
- 如需支持旧版 IE（<11），dataset 不可用，应改用 getAttribute('data-value') —— 但现代项目推荐优先使用 dataset。
? 扩展学习推荐：
掌握 dataset 是处理自定义数据的基础技能，它安全、语义清晰，且被所有现代浏览器完全支持。
