カスタムデータ属性とは?

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()を使えば格納されているデータを取得することができます。