カスタム属性とは、どういう時に使用するのでしょうか？

dataメソッドを使用して、カスタム属性の値を取得出来る

というのは理解出来たのですが、カスタム属性をどのよう

な場面で使用するのか解りません。

ご回答よろしくお願いします。

行動規範の内容に同意します

回答3件

カスタム属性を自分で使うだけでなく、JavaScriptライブラリがカスタム属性を読み取って、コードを書かなくても動作する、というような使い方もあります。

具体例としては、jQuery MobileやIntro.jsといったものがあります。

投稿2015/03/09 00:38

maisumakun

総合スコア145184

ryoichi

2015/03/09 15:15

回答、ありがとうございます。

行動規範の内容に同意します

ベストアンサー

表示する必要は無いのだけど、あとの処理で使うデータを先にセットしておく、といった使い方を最近しました。このときは、json形式のデータをTableに読み込んで、json上の一部のデータをTableの各行にカスタム属性で持たせました。

投稿2015/03/08 14:15

編集2015/03/08 14:19

tohshima

総合スコア374

ryoichi

2015/03/09 15:16

回答、ありがとうございます。

行動規範の内容に同意します

例えば、、、、

lang
1<!DOCTYPE html>
2<html>
3<head lang="ja">
4	<meta charset="UTF-8">
5	<title>玉が動くサンプル</title>
6
7	<!-- style sheet -->
8	<style>
9
10		body{position: relative;}
11
12		.animation{
13			position: absolute;
14			top:0;
15			left:0;
16			width:20px;
17			height:20px;
18			border-radius: 10px;
19			background:red;
20		}
21
22		#controller{
23			position: fixed;
24			bottom:0;
25			left:0;
26			width: 100%;
27			padding:10px 10px 10px 10px;
28			background: rgba(0,0,0,0.2);
29		}
30
31		#controller button{cursor:pointer;}
32		#controller button:hover{background:rgba(0,0,0,0.1);}
33
34	</style>
35	
36</head>
37<body>
38
39<!-- アニメーションする玉 -->
40<div class="animation">&nbsp;</div>
41
42<!-- 玉を動かすコントローラー -->
43<div id="controller">
44	<button id="plus-x"  data-position-x="10">(x:10, y: 0)</button>
45	<button id="plus-y"  data-position-y="10">(x:0 , y:10)</button>
46	<button id="plus-xy" data-position-x="10" data-position-y="5">(x:10, y: 5)</button>
47</div>
48
49<!-- jQuery -->
50<script src="../js/jquery-1.11.2.min.js"></script>
51
52</body>
53</html>

と、HTMLを書いておき、
JavaScript側で

lang
1$(function() {
2
3		var
4			$animation = $(".animation"),   //玉
5			$buttonX  = $("#plus-x"),       //ボタンX
6			$buttonY  = $("#plus-y"),       //ボタンY
7			$buttonXY = $("#plus-xy")       //ボタンXY
8		;
9
10		//各ボタンクリック時、_animation関数が動く
11		$buttonX.on("click", _animation);
12		$buttonY.on("click", _animation);
13		$buttonXY.on("click",_animation);
14
15		/**
16		 * buttonタグのdata属性を見て、玉がアニメーションする関数
17		 * @param e
18		 * @returns {boolean}
19		 * @private
20		 */
21		function _animation(e){
22
23			e.preventDefault();
24
25			var
26				$b = $(this),   //クリックしたボタン
27				posX = parseInt($animation.position().left,10),
28				posY = parseInt($animation.position().top,10);
29
30			//玉の現在位置からdata属性の値分動く量を追加
31			if( $b.data("positionX") )  posX += $b.data("positionX");
32			if( $b.data("positionY") )  posY += $b.data("positionY");
33
34			//玉のアニメーション
35			$animation.stop(true,false).animate({left:posX, top:posY}, 300, "swing");
36
37			return false;
38
39		}
40
41	});