本文详解如何通过 `dataset` api 准确获取 html 元素中 `data-value` 属性的值,解决重复赋值、取值错误等问题,并提供可直接运行的示例代码与关键注意事项。
在前端开发中,常需通过点击操作动态获取自定义数据(如价格),但初学者容易混淆 value 属性与 data-* 属性的访问方式。你提供的代码中使用了 e.target.value,但
元素默认没有 value 属性(value 仅对 、
若需持久化选中状态或跨函数使用该值,建议声明外部变量(如 selectedValue)或使用 localStorage;
如需支持旧版 IE(? 扩展学习推荐:
-
MDN Web Docs: HTMLElement.dataset
- MDN: Using data attributes
掌握 dataset 是处理自定义数据的基础技能,它安全、语义清晰,且被所有现代浏览器完全支持。