カスタムデータ属性「data-*」の使い方、取得の方法アレコレ
というわけでカスタムデータ属性です。
HTMLのタグに指定することでいろいろな値を持たせることが出来、重宝しているのでおさらい。
data-を指定する
HTML
- <div id="test01" data-test="test01">test01</div>
- <div id="test02" data-test-test="test02">test02</div>
- <div id="test03" data-test3='{"data1":"test03-1","data2":3-2}'>test03</div>
- <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