読者です 読者をやめる 読者になる 読者になる

@Konboi memo

主に技術に関してつらつらと。

data属性の値を取得する方法

はじめに

フロントエンジニアの人の手を煩わせる程のことでも無いけど、ちょろっと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の方が使いやすい

まとめ

  • jQuery使わなくても案外簡単にできた。

  • Coffeeで書きなおしてみるか。

参考URL

http://satussy.blogspot.jp/2011/10/javascript-data.html