人に聞けない痔の悩み、これでスッキリ >>

HTMLのデータ属性はどういう時に使えば良いものなのでしょうか?

idやclassだけで事足りるような気がするのですが
間違っていますか?

A 回答 (2件)

data属性は、RGBAの順で0~255の範囲の数値が一次配列となったデータを返します。

この配列データは、ImageDataオブジェクトの各ピクセルが保有している色と透明度を表します。

ImageDataオブジェクトの各ピクセルは、ImageDataオブジェクトの左上から右下に順番に並んでおり h×w×4つの整数 で表すことができます。 hはImageDataオブジェクトの上からの位置を表します。wは高さhにおける左からの位置を表します。 4つの整数はそれぞれ0~255の範囲の数値で、順番に赤(R)・緑(G)・青(B)・透明度(A)を表します。

使用例
HTML + JavaScriptソース
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvasで図形を描く</title>
<script type="text/javascript">
<!--
function test() {
//描画コンテキストの取得
var canvas = document.getElementById('sample');
if (canvas.getContext) {
var context = canvas.getContext('2d');
//寸法100×80のImageDataオブジェクトを生成
var img01 = context.createImageData(100, 80);

//ImageDataオブジェクトのRGBA値をテキストとして描画
context.fillText(img01.data, 20, 20);
context.fillText("R:"+img01.data[0], 20, 40);
context.fillText("G:"+img01.data[1], 20, 60);
context.fillText("B:"+img01.data[2], 20, 80);
context.fillText("A:"+img01.data[3], 20, 100);
}
}
//-->
</script>
</head>
<body onLoad="test()">
<h2>Canvasで図形を描く</h2>
<canvas width="300" height="150" id="sample" style="background-color:yellow;">
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>
    • good
    • 0
この回答へのお礼

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

お礼日時:2018/01/08 23:38

HTML5 にて導入されたグローバル属性 data-* は、一般的には HTML アプリケーションの為の情報です。


それまで id や class や独自属性名で行われていたものを、セマンティクス強化のために分離されました。

スクリプトにて読み書きする HTML 要素の値の中で、
一般的な属性では意味的に合わないようなデータの場合に使用します。

JSON で複雑な情報を記載したり、要素毎に記録したい情報などに使用してください。

参考
https://developer.mozilla.org/ja/docs/Web/HTML/G …
    • good
    • 0
この回答へのお礼

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

お礼日時:2018/01/08 23:38

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング