このエントリーが役に立ったらシェアをお願いします!

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で利用すると、頼もしい武器になると思います。
システム開発でも役に立つので使い方をマスターしておきましょう!

スポンサーリンク

このエントリーが役に立ったらシェアをお願いします!

1この記事を書いた人
ShoheiTai
フロントエンド志向のWebエンジニア。
HTML5やWeb高速化、SEO等のフロントエンド開発が大好物。
バックエンドではCakePHP,Wordpress開発を主戦場としています。
Web開発のスパイスファクトリー株式会社創業メンバー。

イケてないコード - Webエンジニアのブログの
最新情報をいいねしてチェックしよう!