カスタムデータ属性「data-*」の使い方、取得の方法アレコレ

というわけでカスタムデータ属性です。
HTMLのタグに指定することでいろいろな値を持たせることが出来、重宝しているのでおさらい。

data-を指定する

HTML

  1. <div id="test01" data-test="test01">test01</div>
  2. <div id="test02" data-test-test="test02">test02</div>
  3. <div id="test03" data-test3='{"data1":"test03-1","data2":3-2}'>test03</div>
  4. <div id="test04" data-test4_1="test04-1" data-test4_2="04-2">test04</div>

基本は「data-」の後にアルファベットで指定する
「-」を使って複数の単語をつなげることも出来るし、
#test03のように複数の値を指定することも出来る。
もちろん#test04のように複数の属性をつけることも可能。

data()を使って値を取得する

data()の引数に「data-」以降の文字列を指定する
「-」が複数ある場合はキャメルケースでつなぎます。
#test02の場合は「data("testTest")」

data属性を一括で取得でき、型も取得する。
キャッシュされる。
キャッシュがあるとそちらから取得する。

attr()を使って値を取得する

取得した値は常に文字列になる。
data-*を指定しないと取れない

data()とattr()は相容れない存在!?
data()でキャッシュした値にattr()ではサワレナイし一度キャッシュしたら、
attr()で値を書き換えてもdata()では取得できない。

Objectのdatasetから取得する

わざわざ取得しに行かなくてもObjectのdatasetの中に格納されてるから使えばいい。
.on(‘click’)などでObjectを取得した際には特に有効

実際にdata()を使って取得してみる

test01
test02
test03
test04