アプリ版：「スタンプのみでお礼する」機能のリリースについて

HTML データ属性

解決済

  • 質問者：kirawaremono_
  • 質問日時：
  • 回答数：2件

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

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.1ベストアンサー

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

No.2

  • 回答者： Ogre7077
  • 回答日時：

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質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報