html5におけるdata属性の役割は何ですか？-フロントエンドQ&A-php.cn

html5におけるdata属性の役割は何ですか？

WBOY

リリース： 2022-06-20 10:44:47

オリジナル

4129 人が閲覧しました

HTML5 の data 属性は、プライベートページの後に適用されるカスタムデータを保存するために使用されます。「data-*」は、HTML5 の新しいカスタムデータ属性関数であり、データを一時的に保存し、カスタマイズするために使用できます。ページのインタラクティブなエクスペリエンスを向上させます。この属性の属性名には大文字を含めることはできず、「data-」の後に少なくとも 1 文字が必要です。

html5におけるdata属性の役割は何ですか？

このチュートリアルの動作環境: Windows 10 システム、HTML5 バージョン、Dell G3 コンピューター。

html5 における data 属性の役割は何ですか?

data-* 属性は、プライベートページの背後に適用されるカスタムデータを保存するために使用されます。

data-* 属性は、すべての HTML 要素にデータを埋め込むことができます。

カスタマイズされたデータにより、ページのインタラクティブなエクスペリエンスが向上します (Ajax を使用したり、サーバー上のデータをクエリしたりする必要はありません)。

data-* 属性は次の 2 つの部分で構成されます。

属性名には大文字が含まれていてはならず、data- の後に少なくとも 1 文字が必要です。。
この属性には任意の文字列を指定できます。

data-* は、HTML5 の新しいカスタムデータ属性関数であり、一時的に保存できます。。 dataset を使用して、data-attribute によって構築されたオブジェクトを取得できます。このメソッドは現在、Chrome や Opera などの一部のブラウザにのみ実装されています。他のブラウザが属性値を取得する必要がある場合は、getAttribute および setAttribute を使用して操作する必要があります。

構文は次のとおりです。

<element data-*="somevalue">

ログイン後にコピー

somevalue は属性値 (文字列) を指定します。

例は次のとおりです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<script>
function showDetails(animal)
{
var animalType = animal.getAttribute("data-animal-type");
alert("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>
<h1>物种</h1>
<p>点击一个物种，看看它是什么类型：</p>
<ul>
  <li onclick="showDetails(this)" id="owl" data-animal-type="bird">Owl</li>
  <li onclick="showDetails(this)" id="salmon" data-animal-type="fish">Salmon</li>  
  <li onclick="showDetails(this)" id="tarantula" data-animal-type="spider">Tarantula</li>  
</ul>
</body>
</html>

ログイン後にコピー

出力結果:

html5におけるdata属性の役割は何ですか？