本文详解如何通过 `dataset` api 准确获取 html 元素的自定义 `data-value` 属性值，解决重复取值、误用 `.value` 等常见问题，并提供可立即运行的完整示例。
在 Web 开发中，常需为价格选项、配置项等列表元素添加点击交互，并读取其关联的数据值（如 data-value="250"）。初学者容易误用 e.target.value —— 但
✅ 正确做法是使用 element.dataset.xxx API：浏览器会自动将 data-value 映射为 dataset.value（驼峰命名规则：data-user-id → dataset.userId）。
以下是修复后的完整、健壮的实现代码：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
<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>
const prices = document.querySelectorAll('.price');
prices.forEach(price => {
price.addEventListener('click', e => {
// 1. 移除所有 active 类（取消之前选中）
prices.forEach(el => el.classList.remove('active'));
// 2. 为当前点击项添加 active 类
e.target.classList.add('active');
// 3. ✅ 正确获取 data-value：使用 dataset.value
const currentValue = e.target.dataset.value;
console.log('当前选中金额（฿）:', currentValue); // 输出如 "250"
// ✅ 扩展建议：保存到变量/发送至后端/更新表单字段
// const selectedAmount = Number(currentValue); // 转为数字便于计算
});
});⚠️ 注意事项：
- ❌ 不要写 e.target.value ——
- 没有 value 属性，返回 undefined；
- ✅ 必须用 e.target.dataset.value（注意大小写：data-value → dataset.value）；
- ? dataset 是只读对象，修改它不会影响 HTML 属性（如需写入，请用 el.setAttribute('data-value', 'new')）；
- ? 若需兼容旧版 IE（
? 小技巧：你还可以在 CSS 中利用 active 类做视觉反馈，例如：
.price.active {
background-color: #007bff;
color: white;
font-weight: bold;
}总结：dataset 是操作自定义数据属性的标准、语义化且高性能的方式。掌握它，能让你更安全、清晰地管理 UI 状态与业务数据之间的映射关系。如需深入学习，推荐 MDN 官方文档：https://www.php.cn/link/b4c6c8bca8d88ac2274d91673368f08a
