JavaScript 获取数据属性值

在 JavaScript 中，每个 HTML 元素都可以设置和获取自定义的数据属性。数据属性是指在 HTML 元素中添加的自定义属性，用于存储与该元素相关的数据信息。

本文将介绍如何使用 JavaScript 获取数据属性值。

使用 getAttribute() 方法

可以使用 getAttribute() 方法来获取 HTML 元素的数据属性值。

const element = document.getElementById("myElement");
const dataValue = element.getAttribute("data-value");

在上面的示例中，我们首先通过 getElementById() 方法获取了 id 属性为 "myElement" 的元素。然后，使用 getAttribute() 方法获取了该元素的名为 "data-value" 的数据属性值，并将其存储在 dataValue 变量中。

使用 dataset 属性

除了 getAttribute() 方法，还可以使用 dataset 属性来获取数据属性值。

const element = document.getElementById("myElement");
const dataValue = element.dataset.value;

在上面的示例中，我们同样使用 getElementById() 方法获取了 id 属性为 "myElement" 的元素。然后，通过 dataset 属性和数据属性名 "value"，直接获取了其数据属性值，并将其存储在 dataValue 变量中。

需要注意的是，使用 dataset 属性时，数据属性名中的连字符 "-" 在 JavaScript 中会被转换为驼峰命名法。

兼容性考虑

dataset 属性和 getAttribute() 方法都是较新的 API，因此在一些旧版本的浏览器中可能不被支持。如果需要在旧版本的浏览器上使用，可以考虑使用其他方法来获取数据属性值。

结论

通过本文，我们学习了如何使用 JavaScript 获取 HTML 元素的数据属性值。可以使用 getAttribute() 方法或 dataset 属性来实现这个功能。根据需求和兼容性要求选择适合的方法。

希望本文对你理解 JavaScript 获取数据属性值有帮助！

参考文档：MDN-获取数据属性