LoginSignup
135

More than 5 years have passed since last update.

HTML5における独自データ属性の取り扱い

Last updated at Posted at 2013-04-20

前提条件

この記事は、HTML5に対応したブラウザを使用することを前提として記述している。
HTML5対応のブラウザに関しては以下のサイトを参照のこと。

独自データ属性とは

HTML要素の属性として定義されていない、WebページやWebアプリケーション固有の属性のことを指す。
WebページやWebアプリケーションで固有の独自データを取得する際に使用する。

独自データ属性の定義

属性名の先頭に「data-」を付ける。

<ul>
  <li data-user-id="1">Taro</li>
</ul>

独自データ属性の値を取得する

(1) 一般的なJavaScriptによるコーディング例

HTML要素の dataset IDL属性を使って独自データ属性の値を取得する。
dataset IDL 属性は、要素にセットされたすべての data-* 属性に対して便利なアクセサーを提供している。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <section id="blog" data-author="Taro" data-create-date="2013-04-10">
      <h1>Hello World!</h1>
      <p>This is a sample text.</p>
    </section>
    <script>
      var blog = document.getElementById("blog");
      alert("author : " + blog.dataset.author);
      alert("create date : " + blog.dataset.createDate);
    </script>
  </body>
</html>

(注) 独自データ属性の名前に create-date のような複数の単語をハイフンで組み合わせている場合、「-」を区切りとしたキャメル方式の形
式で独自データ属性にアクセスする。

(2) jQueryによるコーディング例

jQueryでは、data()メソッドを使って独自データ属性の値を取得する。ただし、使用するjQueryのバージョンによってdata()メソッドの使い方が変わってくる。

jQuery 1.4.3 を使う場合、「-」を区切りとしたキャメル方式の形式でdata()メソッドを呼び出しても、独自データ属性の値は取得できない。「data-」以降の属性名をそのまま指定しないといけない。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
  </head>
  <body>
    <section id="blog" data-author="Taro" data-create-date="2013-04-10">
      <h1>Hello World!</h1>
      <p>This is a sample text.</p>
    </section>
    <script>
      var blog = $("#blog");
      alert("author : " + blog.data('author'));
      alert("create date : " + blog.data('create-date'));
    </script>
  </body>
</html>

jQuery 1.6以降の場合、「data-」以降の属性名をそのままの形式で指定する、もしくは、「-」を区切りとしたキャメル方式の形式で指定しても、独自データ属性の値を取得することができる。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  </head>
  <body>
    <section id="blog" data-author="Taro" data-create-date="2013-04-10">
      <h1>Hello World!</h1>
      <p>This is a sample text.</p>
    </section>
    <script>
      var blog = $("#blog");
      alert("author : " + blog.data('author'));
      alert("create date (Part 1) : " + blog.data('create-date'));
      alert("create date (Part 2) : " + blog.data('createDate'));
    </script>
  </body>
</html>

参考資料

HTML5.JP
jQuery API Documentation

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
135