HTML5 で data-* 属性を使用する方法-htmlチュートリアル-php.cn

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

清浅

リリース： 2018-12-03 09:29:55

オリジナル

3958 人が閲覧しました

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 ムービーのパラメータも設定できます。カスタムネットワーク分析タグデータなどを保存します。

例:





Document




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

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


  小猫咪
  苹果

ログイン後にコピー

レンダリング:

クリック前

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

クリック後

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

注

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

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