前提条件
この記事は、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>