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

Question

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

使用 jQuery 很容易，但是如果没有 jQuery，我在任何地方都看不到如何做到这一点。

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

甚至可能吗？

Answer 1

在这里我找到了这个例子：

<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>

所以它看起来非常可行。

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

Answer 2

您可以使用数据集属性。如：

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

Answer 3

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

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

Answer 4

您还可以使用：

getAttribute('data-property');

这更干净，更容易阅读。

这将获得数据属性的值。

Answer 5

我想你可以试试这个：

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

或使用

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