カスタムデータ属性とは

HTML5から導入された新たな属性のことです。
htmlのタグにはvalueやidなどの属性がありますが、カスタムデータ属性を使うことでオリジナルの属性を作ることができます。
そして、その属性に文字列を格納することができます。

要素にデータを持つといえばvalueが思いつきますが、valueはすべてのタグで使えるわけではありません。しかし、カスタムデータ属性ならdivなどすべてのHTMLタグが持つことができます。

用途

カスタムデータ属性にはさまざまな使用シーンがあります。

タグの中に属性と同じふんいきで「data-データ属性名」と記述すればカスタムデータ属性を設定することができます。

<div class="item" data-flower="tulip">...</div>

「data-flower」がカスタムデータ属性。その中にtulipという文字列データを持たせています。

const element = document.querySelector('.item');
const flower = element.dataset.flower;
console.log(flower);
// tulip

カスタムデータ属性を持つ要素を取得
datasetプロパティを使って、データ属性名「flower」のデータを取得する
- data-flowerをjsで呼ぶときは「flower」でよいのがポイント
出力すると「tulip」と表示される

カスタムデータ属性をJavascriptで扱うときは、datasetプロパティを使うことになります。
データの取得も格納も、さらにデータ属性の設定もこの属性を使って行います。

datasetを使ってデータを取得するには以下のようにします。

const 変数 = 要素.dataset.データ属性名;

使用例)

const element = document.querySelector('.item');
const flower = element.dataset.flower;

「data-flower」の値が変数flowerに格納されます。

データを属性に格納するには以下のようにします。

要素.dataset.データ属性名 = 値;

使用例)

const element = document.querySelector('.item');
element.dataset.flower = "rose";

itemクラスを持つ要素の「data-flower」に「rose」という文字列が格納されます。
ちなみに、数値を格納したとしても文字列として扱われます。

jsからカスタムデータ属性を新たに設定することも可能です。
以下のようにします。

要素.dataset.データ属性名 = 値;

使用例)

<div class="item" data-flower="tulip">...</div>

const element = document.querySelector('.item');
element.dataset.number = 1;
// <div class="item" data-flower="tulip" data-number="1">...</div>

itemクラスを持つ要素にはもともと「data-number」という属性はありません。
しかしelement.dataset.number = 1というコードを書くことで、data-numberという属性が作成されて、指定した値が格納されます。
やり方はデータの格納とまったく同じですね。

CSSのセレクタにカスタムデータ属性を使う方法も記しておきます。

[data-flower="tulip"]{
    color: red;
}

以上のcssを当てると、data-flowerがtulipの要素だけ文字色が赤くなります。
クリックイベントなどと組み合わせて動的にスタイルを当てたいときなんかに使えそうですね。