HTML5 で data-* 属性を使用する方法

HTML5 の data 属性は、より良いユーザー エクスペリエンスを作成する目的で、主にページにプライベート カスタム データを保存するために使用されます

多くの新しい属性が HTML5 に追加されました属性、今日は HTML5 の data-* 属性を紹介します。皆さんのお役に立てれば幸いです。

【おすすめコース：HTML5コース】

##data-* 属性の意味

data-* 属性は、ページまたはアプリケーションのプライベート カスタム データを保存するために使用されます。すべての HTML 要素のデータ。JavaScript がより良いユーザー エクスペリエンスを作成するために利用できるデータが保存されます。

data-* 属性には 2 つの部分が含まれます:

属性名: 属性名には大文字を含めることはできません。プレフィックス「data-」の後に 1 文字が必要です。空の。

属性値: 属性値には任意の文字列を指定できます。

<element data-*="somevalue">

Example

data-animal-type="动物类"

data-* 属性の使用方法

カスタム データ属性は有効な HTML 5 であるため、使用できます。 HTML 5 ドキュメント タイプをサポートするブラウザで使用します。

JavaScript アニメーションに格納されている必要な要素の初期の高さまたは不透明度を設定できます。また、JavaScript 経由でロードされる Flash ムービーのパラメータも設定できます。カスタム ネットワーク分析タグ データなどを保存します。

例:

<script>
function showDetails(animal) {
    var animalType = animal.getAttribute("data-animal-type");
  console.log(animal.innerHTML + "是一种" + animalType + "。");

}
</script>
点击li时显示其类别


  
小猫咪
  
苹果
  

レンダリング:

クリック前

クリック後

注

データ属性は柔軟ですが、データ属性はすべての問題に適用できるわけではありません。たとえば、次のような既存の方法があります。データ属性または要素の保存に適しているため、データ属性は使用しないでください。たとえば、日付/時刻データはカスタム データ属性に保存するのではなく、意味的に表示する必要があり、特定のデータ属性をスタイル付き CSS に関連付けるべきではありません。さらに、データ属性がますます広く使用されるようになると、命名規則の矛盾がますます大きくなる可能性があるため、名前を付けるときは、プラグイン名またはパブリック属性名との混同を避けるように注意する必要があります。概要: 以上がこの記事の全内容です。HTML5 を学習するすべての人に役立つことを願っています。

以上がHTML5 で data-* 属性を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。