HTML5 引入了 data-* 属性，允许开发者在 HTML 元素上存储自定义数据。这些属性可以通过 JavaScript 调用，使开发者能够更好地将数据从 HTML 传递到 JavaScript 中。在本篇文章中，我们将探讨如何使用 data-* 属性将数据传递给 JavaScript，以及如何在实际项目中应用。
使用 data-* 属性
要使用 data-* 属性，只需在 HTML 元素上添加带有自定义名称的 data- 前缀即可。例如，假设我们想将一条消息 ID 存储在一个 div 元素中：
---- ------------ ---------------------------- -- - --------------
我们在 div 元素上添加了 data-message-id="12345" 属性。现在，我们可以使用 JavaScript 获取该属性的值：
----- ---------- - ----------------------------------- ----- --------- - ----------------------------- ----------------------- -- -- -------
我们可以通过访问元素的 dataset 属性来获取 data-* 属性的值。这个属性是一个对象，其中包含元素上所有以 data- 前缀命名的属性及其对应的值。
在实际项目中应用
使用 data-* 属性可以方便地将数据从 HTML 传递到 JavaScript 中。例如，在一个在线商店项目中，我们可以为每个商品添加一个自定义 data-product-id 属性：
---- --------------- ---------------------- ----------- --------- -------------- -- ------------ ------- ----------------------- -- ------------- ------
现在，当用户点击“添加到购物车”按钮时，我们可以通过 JavaScript 获取所选择的产品 ID：
----- ---------------- - ------------------------------------------
------------------------------- -- -
-------------------------------- ----- -- -
----- --------- - ---------------------------------------------------
-----------------------
---
---这里我们使用了 querySelectorAll 方法来选取所有带有“添加到购物车”类的按钮，并通过 forEach 循环遍历它们。当用户点击任何一个按钮时，我们可以获取该按钮的最近 .product 祖先元素，并从其 dataset 中提取 data-product-id 值。
总结
data-* 属性是一个非常有用的功能，可以将数据从 HTML 传递到 JavaScript 中，以实现更好的交互和动态效果。在实际项目中应用时，我们可以使用它来存储各种自定义数据，例如产品 ID、用户 ID、页面状态等等。不过需要注意，data-* 属性值只能是字符串，如果需要存储复杂数据类型，需要进行转换或者使用其他方法来实现。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/29062