HTML

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