HTML5のデータを使ってより良いUXを構築する方法 - *属性

後でJavaScriptでアクセスするために、特定のHTML要素にカスタムデータを追加したいことがありますか。 HTML 5が登場する前は、DOMに関連するカスタムデータを保存するのは大変なことでした。開発者は、非標準の属性を導入したり、廃止されたsetUserData（）メソッドを使って問題を回避するなど、あらゆる種類の厄介なハックを行わなければなりませんでした。.

幸いなことに、HTML 5では新しいグローバルが導入されたので、これ以上行う必要はありません。 データ-* 任意のHTML要素に追加情報を埋め込むことを可能にする属性。新しい データ-* 属性 HTMLをより拡張可能にする, したがって より複雑なアプリを作成できるようにする, Ajax呼び出しやサーバーサイドのデータベースクエリなど、リソースを大量に消費するテクニックを使用せずに、より洗練されたユーザーエクスペリエンスを作成できます。.

最近のすべてのブラウザでサポートされているため、新しいグローバル属性のブラウザサポートは比較的優れています（IE 8-10で部分的にサポートされています）。.

の構文 データ-* 属性

新しいの構文 データ-* attributesは、ariaというプレフィックスが付いた属性と似ています。の代わりに任意の小文字の文字列を挿入できます。 * 符号。また、文字列の形式で各属性に値を割り当てる必要があります。.

あなたが作成したいとしましょう 私たちに関しては 各ページに移動し、各従業員が所属する部門の名前を保存します。追加すること以外に何もする必要はありません。 データ部 次のようにして、カスタム属性を適切なHTML要素に設定します。

 
 
 ジョン・ドウ 
 
 ジェーン・ドウ 
 

カスタム データ-* 属性はグローバルなものです。 クラス そして id 属性なので、すべてのHTML要素でそれらを使用できます。追加することもできます データ-* 必要に応じてHTMLタグに属性を追加します。上の例では、たとえば、という名前の新しいカスタム属性を導入できます。 データ利用者 従業員のユーザー名を保存する.

 
 
 ジョン・ドウ 
 
 ジェーン・ドウ 
 

原則として、HTML要素に独自のカスタム属性を追加したい場合は、必ずそれに接頭辞を付ける必要があります。 データ- 文字列同様に、あなたが他の誰かのコードの中にデータ接頭辞属性を見たとき、あなたはそれが作者によって導入されたカスタム属性であることを確かに知ることができます.

カスタム属性を使用する場合と使用しない場合

W3Cはカスタムを定義します データ-* そのような属性：

“カスタムデータ属性は、ページまたはアプリケーション専用のカスタムデータを格納することを目的としています。これに対して、これ以上適切な属性または要素はありません。.”

使用を検討する価値があります データ-* 属性 保存したいデータの他のセマンティック属性が見つからない場合.

あなたがから選ぶことができるという点で、スタイリング目的のためだけにそれらを使用することは最善の方法ではありません。 クラス そしてその スタイル 属性HTML5がセマンティック属性を持つようなデータ型を保存したい場合は、 日付時刻 の属性 要素。データ接頭辞属性の代わりにそれを使用.

注意することが重要です データ-* 属性は、 ページまたはアプリケーション専用, これは、検索エンジンボットや外部アプリケーションなどのユーザーエージェントによって無視されることを意味します。データプレフィックス属性には、HTMLをホストするサイトで実行されているコードによってのみアクセスできます。.

カスタム データ-* 属性は、BootstrapやZurb Foundationなどのフロントエンドフレームワークでも広く使用されています。幸いなことに、データプレフィックス属性をフレームワークの一部として使用する場合は、JavaScriptの作成方法を知っておく必要はありません。それらの属性をHTMLコードに追加するだけで済みます。 JavaScriptプラグイン.

以下のコードスニペットは、Bootstrapのボタンに左側にツールチップを追加しています。 データトグル そしてその データ配置 カスタム属性、およびそれらに適切な値を割り当てる.

  左側のツールチップ 

ターゲット データ-* CSSによる属性

使用はお勧めできませんが データ-* スタイル設定の目的でのみ属性を使用する場合は、一般的な属性セレクタを使用して、それらが属するHTML要素を選択できます。特定のデータプレフィックス属性を持つ各要素を選択する場合は、CSSで次の構文を使用してください。

 li [データ利用者] 色：青; 

カスタム属性に格納されているすべてのデータが表示されなくなった後で、上記のコードスニペットに青色で表示されるのはユーザー名ではありません。

 li [data-department = "IT"] 国境：青一色; 

 var jane = document.getElementById（ "jane"）; console.log（jane.dataset）; // DOMStringMap user： "janedoe"、department： "IT" 

 var jane = document.getElementById（ "jane"）; console.log（jane.dataset.user）// janedoe

 $（ "＃jane"）。hover（function（）var department = $（ "＃jane"）。data（ "department"）; alert（department）;）;

 var town = $（ "＃jane"）。data（ "town"、 "New York"）;