javascript - jQueryなしで「data-」属性にアクセスする

Question

jQuery なしで data- 属性にアクセスできますか?

jQuery を使えば簡単ですが、jQuery を使わずにそれを行う方法はどこにもありません。

「jQueryなし」でGoogleで検索すると、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>

したがって、それは非常に実行可能に見えます。

更新: Microsoft は現在 (2020 年) Chromium ベースの Edge を優先して古い Internet Explorer エンジンを段階的に廃止しているため、このdatasetプロパティはどこでも機能する可能性があります。しばらくの間、IE がまだ強制されている組織や企業ネットワークは例外となります。ただし、これを書いている時点では、少なくとも Chrome 81 では、jsPerfはデータセットを使用するよりも get/setAttribute メソッドの方が高速であることを示しています。

Answer 2

データセット属性を使用できます。次のように:

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

Answer 3

これを試すことができると思います：

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

または使用

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