HTML5の独自データ属性を使ってみよう!

HTML5HTML
HTML5

今回はHTML5で追加された「独自データ属性」をご紹介します。
最近ではjavascriptのプラグインなどで積極的に使われるようになっています。
マークアップに意味を持たせることができ、Webアプリケーション開発の際に大きく役立つと思います。

独自データ属性とは…

その名の通り、自分で任意に追加することができる属性のことです。
基本的にどのタグにも対応します。
その属性に対して値を入れておくことで、javascriptやjQueryからその属性値にアクセスすることが出来ます。

独自データ属性の名前の付け方についてですが、ある命名規則に沿った名前を付けなければなりません。
独自データ属性はdata-を頭に付けて、その後にアルファベットで任意の文字を記述します。
例:data-column,data-abc,data-method,data-hoge
これらの名前をもとに、javascriptやjQueryから値にアクセスします。

実際に使ってみよう!

HTMLを記述します。

<button onclick="getData();">ボタン</button>
<div id="hoge-box" data-type="20" data-m="hoge">
  <!-- something -->
</div>
<p data-column="userid">0123</p>

属性値は数字でも文字列でも問題ありません。
あとはこいつらにjavascriptやjQueryからアクセスします。

javascriptを使用した場合

function getData() {
    //divのエレメントを取得
    var test = document.getElementById('hoge-box');
    //取得したdivエレメントのdata-typeの属性値を取得する
    var val = test.dataset.type;
    alert(val);    //20を出力
    val = test.getAttribute('data-m');
    alert(val);    //hogeを出力
}

datasetを使用して独自データ属性を指定するか、
getAttributeで属性値を取得することで値を利用することが出来ます。

jQueryを使用した場合

function getData() {
    //divのエレメントを取得
    var test = $('#hoge-box');
    //取得したdivエレメントのdata-typeの属性値を取得する
    var val = test.data('type');
    alert(val);    //20を出力
    val = test.attr('data-m');
    alert(val);    //hogeを出力
}

javascriptと同じように属性を指定して取得することも可能ですが、
jQueryのdata関数を使用して引数に独自データ属性の名前を指定してやると取得することが出来ます。

まとめ

  • 独自データ属性の命名規則はdata-○○
  • 全てのタグに有効で、いくつでも追加できる
  • javascriptではdatasetで取得する
  • jQueryではdataメソッドで取得する

いかがでしたでしょうか。
この独自データ属性、非常に便利です。
jQueryやajaxで利用すると、頼もしい武器になると思います。
システム開発でも役に立つので使い方をマスターしておきましょう!

HTMLHTML5
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
この記事を書いた人

スパイスファクトリー株式会社 Webエンジニア。フロントエンドやWebサイトの高速化が得意です。インフラ・バックエンドも一通りやってます。
個人的なお仕事のご依頼や情報交換などはお問い合わせまたはTwitterにメンションをお願いします。

ShoheiTaiをフォローする
このエントリーが役に立ったらシェアをお願いします!
イケてないコード – Webエンジニアのブログ

コメント

タイトルとURLをコピーしました