在没有jQuery的情况下访问'data-'属性

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

使用jQuery很容易，但是没有jQuery，我看不到如何做。

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

可能吗

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

<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上是如此。

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

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

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

还是我错过了你的问题的重点。

我认为您可以尝试以下方法：

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

或使用

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