jQueryのdata属性の利用について

data属性を定義することで、タグの関連を表しやすかったので使いました。 jsのノウハウも蓄積していきたいので、書いていきます。

data属性とは

独自データ属性は、適切な属性や要素がない場合に、ページやアプリケーションに固有の独自データを格納することを想定したものです。 すべてのHTML要素に対して、独自データ属性をいくつでも、どんな値でも指定することができます。

利用する方法

jQueryを利用しているの想定して書いていきます。 すべてのHTML要素に利用できるので、下記の記述でdata属性の値が取得、更新できます。

<a href="http://localhost:80" data-role="hoge">fuga</a>

<script type="text/javascript">
  $("a").on("click", function() {
    // data属性の値を取得
    console.log($(this).data('role'));
    console.log($(this).attr('data-role'));
    // data属性の値を更新
    $(this).data('role', 'hoge');
    $(this).attr('data-role', 'hoge);
  });
</script>

という感じですね。

参考 - http://dresscording.com/blog/html5/custom_data_attribute.html - http://www.html5.jp/tag/attributes/data.html