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

HTML5の独自属性を取得する。

HTML5になってからタグに独自の属性を設定できるようになりました!
厳密に言うとdata属性らしいですが

例えば

<div id="hoge" data-hoge-id="12345"></div>

のようなかんじです。
data- に続いて独自の属性を定義します。

この属性をJavaScriptで取得するとき、普通に取得すると
そんなもんねーよ!って怒られます
なのでこの方法だとダメです。

document.getElementById('hoge').data-hoge-id;
//取得できない(hogeIdでもダメ)

取得するにはいくつか方法があります。
1つはgetAttributeを使う方法と、新しく入ったdatasetを使う方法です。
とりあえず後者だけで

document.getElementById('hoge').dataset.hogeId; //12345

これで取得できます。
ポイントは data- は省略して、CSSを操作するときの様に
ハイフンは省いて次の文字を大文字にします。

最後にjQueryから取得する方法です。
この場合はとくにハイフン省略したりだとかしなくていいっぽいです
ちなみにこれもいくつか方法があるらしいですが一番無難なものを紹介

$('#hoge').attr('data-hoge-id'); //12345

こんなかんじです
何か間違ってる所あったら添削お願いですっ