HTML5からマークアップ仕様で「カスタムデータ属性」が追加されました。
何のために、どうやって使うのでしょうか?
1,カスタムデータ属性で何ができる?
htmlタグの属性には、classやid、hrefといった様々なものがあります。カスタムデータ属性を使用すると、オリジナルの属性を作ることができます。
<div class="message" data-id="message.id">
カスタムデータ属性の名前は常にdataから始まります。
2,カスタムデータ属性における記述のきまりは?
カスタムデータ属性の記述において、いくつかのきまりがあります。
まず一つ目は。データ属性に格納するデータは文字列である必要があります。文字列であれば、自由に記述することができます。
2つ目は、他の要素名と被ってはいけません
なので、class名をデータ属性として格納することは適切ではありません。
3,カスタムデータ属性の役割とは?
カスタムデータ属性は主にJavaScriptで値を取得するときに使われます。
class属性はスタイル情報を割り当てることが目的で、データを格納するには適切ではありません。
例えばdataの値を取得したいときは、
<div class="message" data-id="5">
var message_id = $(".message").data('id');
console.log(message_id) // "5"
とdata()を使えば格納されているデータを取得することができます。