Help us understand the problem. What is going on with this article?

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

More than 5 years have passed since last update.

前提条件

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

http://caniuse.com/

独自データ属性とは

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away