在没有 jQuery 的情况下访问“数据-”属性答案

【问题标题】：Access 'data-' attribute without jQuery在没有 jQuery 的情况下访问“数据-”属性
【发布时间】：2013-04-01 11:47:42
【问题描述】：

我可以在没有 jQuery 的情况下访问 data- 属性吗？

使用 jQuery 很容易，但没有 jQuery 我看不到任何地方。

如果我在 Google 上搜索“没有 jQuery”，我得到的只是 jQuery 示例。

有可能吗？

【问题讨论】：

这是旧的，但它可以让你继续前进：html5doctor.com/html5-custom-data-attributes

标签： javascript

【解决方案1】：

在here我找到了这个例子：

<div id='strawberry-plant' data-fruit='12'></div>
<script>
    // 'Getting' data-attributes using getAttribute
    var plant = document.getElementById('strawberry-plant');
    var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12'
    // 'Setting' data-attributes using setAttribute
    plant.setAttribute('data-fruit', '7'); // Pesky birds
</script>

所以看起来很可行。

更新：由于 Microsoft 现在（2020 年）逐步淘汰旧的 Internet Explorer 引擎以支持基于 Chromium 的 Edge，dataset 属性很可能在任何地方都有效。在一段时间内，IE 仍被强制使用的组织和企业网络将是一个例外。但在撰写本文时 - jsPerf 仍然显示 get/setAttribute 方法比使用数据集更快，至少在 Chrome 81 上是这样。

【讨论】：

这似乎是正确的方法。此外，您可能需要能够执行以下操作： document.getElementById('strawberry-plant').setAttribute('data-fruit', 'Some Data Here');
请参阅下面关于数据集的 tomor 答案 - 这是正确的答案，除非您必须支持已弃用的 Web 浏览器 (IE)，如果是这种情况，这对您来说真的很不幸......所有现代浏览器版本目前几乎完全支持 HTML5 和 ECMAScript 5（当然）和 6。
似乎也比数据集更具可读性。大多数开发人员第一眼就会知道那行代码的作用，但不确定你是否可以对数据集说同样的话

【解决方案2】：

这只是一个属性...使用getAttribute 与任何其他属性一样：https://developer.mozilla.org/en/docs/DOM/element.getAttribute

或者我错过了你的问题的重点。

【讨论】：

【解决方案3】：

您可以使用 dataset 属性。如：

element = document.getElementById("el");
alert(element.dataset.name); // element.dataset.name == data-name

【讨论】：

注意：虽然完全正确，但这仅适用于兼容 HTML5 的浏览器。使用getAttribute 方法将适用于大多数浏览器。
虽然不一定向后兼容已弃用的浏览器（例如，所有版本的 IE），但这是正确的答案。这在当时（2013 年）肯定是具有前瞻性的想法，但现在 5 年过去了，这就是应该这样做的方式。

【解决方案4】：

我想你可以试试这个：

var ele = document.getElementById("myelement");
if (ele.hasOwnProperty("data")) {
  alert(ele.data);
}

或使用

alert(ele['data-property']);

【讨论】：

来自 MDN 文档，使用 getAttribute 方法是理想的，因为它更快，我在下面引用：** 此外，与将这些数据存储在 JS 数据仓库中相比，读取数据属性的性能很穷。使用数据集甚至比使用 getAttribute() 读取数据还要慢。** - link

【解决方案5】：

你也可以使用：

getAttribute('data-property');

这样更简洁，更易于阅读。

这将获取数据属性的值。

【讨论】：