HTML5 引入了 data-* 属性，允许 Web 开发者在 HTML 标签中存储自定义数据。这些数据通常用于向 JavaScript 代码提供上下文信息。在本文中，我们将探讨如何使用 JavaScript 获取 data-* 属性并将其用于网页开发。
获取 data attributes
要获取一个元素的 data-* 属性，可以使用该元素的 dataset 属性。例如，假设有以下 HTML 元素：
<div id="my-element" data-color="red" data-size="large"></div>
您可以使用下面的 JavaScript 代码来获取该元素的 data-* 属性：
const element = document.querySelector('#my-element');
const color = element.dataset.color;
const size = element.dataset.size;在此示例中，color 变量的值为 "red"，size 变量的值为 "large"。请注意，属性名称中的破折号 - 需要转换为 camelCase 命名规则，例如 data-color 对应 dataset.color。
将 data attributes 用于网页开发
data-* 属性是一个强大的工具，可用于存储与元素相关联的任何数据。例如，您可以在按钮元素中添加 data-action 属性，以便在 JavaScript 中动态注册事件处理程序：
<button id="my-button" data-action="submit-form">Submit</button>
-- -------------------- ---- -------
----- ------ - -------------------------------------
----- ------ - ----------------------
-------------------------------- -- -- -
-- ------- --- -------------- -
-- ----
- ---- -- ------- --- ------------- -
-- ----
-
---在此示例中，当单击按钮时，我们检查 data-action 属性的值并根据其值执行不同的操作。这使得我们可以通过更改 HTML 中元素的 data-* 属性来动态更改按钮的行为。
结论
data-* 属性是一个非常有用的工具，可用于存储自定义数据并将其用于网页开发。使用 JavaScript 的 dataset 属性，您可以轻松地获取和使用 data-* 属性。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/31692