はじめに

フロントエンジニアの人の手を煩わせる程のことでも無いけど、ちょろっとJsが必要な時にはよく jQuery を使う。

ただ今回はほんとにちょろっとすぎるので jQuery すら入れたくなかった。ので最近よく使われる data属性を jQuery を使わずにとる方法を調べたのでメモっておく

取得方法

方法は2種類あるみたい。例としてこのhtmlのdata属性を取得してみる。

<div id="hoge" data-key="hoo">
   <p>piyo</p>
</div>

方法1

var elem = dcoument.getElementById("hoge")

var data = elem.getAttribute("data-key");

方法2

var elem = dcoument.getElementById("hoge")

var data =  elem.dataset.key

個人的には方法2の方が使いやすい