説明
例えば、下記は、data-color、data-count、data-color-hairというカスタムデータ属性を作って、要素に付加した例です。このように、data-に続けて自由に属性名を作ることができます。属性名に、大文字を使うことはできません。
HTML
<p data-color="red">今日はいい天気だ。</p>
<p>現在、猫が撫でられた回数は、<span data-count="0">0</span>回だ。</p>
<p>私の髪の毛は、現在は<span data-color-hair="brown">茶色</span>だ。</p>JavaScriptで利用する
カスタムデータ属性は、それだけでは何の意味も持ちません。主に役に立つのは、JavaScriptでのプログラミング時です。例えば、「クリックした要素の色を変える」という処理をJavaScriptで実装するケースを考えましょう。要素を増やしたい時に、下記は何とも非効率だとは思いませんか？要素の数だけ、関数を用意しなければいけません。
HTML
<p id="green-color">クリックで緑色になります。</p>
<p id="blue-color">クリックで青色になります。</p>JavaScript
// [id=green]をクリックしたら文字色を緑にする
var element = document.getElementById( "green-color" )
element.onclick = function() {
this.style.color = "green" ;
}
// [id=blue]をクリックしたら文字色を青にする
var element = document.getElementById( "blue-color" )
element.onclick = function() {
this.style.color = "blue" ;
}そういった非効率を解消できるのが、カスタムデータ属性です。カスタムデータ属性は、要素に、自由に属性を付加できます。例えば、data-colorという属性を作って、値に変更後の色を指定したらどうでしょうか？次のように、「クリックしたら、その要素に設定してあるdata-color属性の値を参照し、その色に変更する」という1つの関数で、いくつもの要素に対応できるようになりました。JavaScriptのプログラマーにとって夢のような存在が、このカスタムデータ属性なんです。
HTML
<p class="change" data-color="green">クリックで緑色になります。</p>
<p class="change" data-color="blue">クリックで青色になります。</p>
<p class="change" data-color="red">クリックで赤色になります。</p>
<p class="change" data-color="#D36015">クリックでSYNCER色になります。</p>JavaScript
// [class=change]をクリックしたら文字色を[data-color]にする
var elements = document.getElementsByClassName( "change" )
for( var i=elements.length; i--; ) {
elements[i].onclick = function() {
this.style.color = this.getAttribute( "data-color" ) ;
}
}