26

HTMLタグの2つの奇妙な属性に直面しました. それらは "data-url"と"data-key"です。

それらは何で、どのように使用できますか?

いくつかの理由で、私が見つけた HTML ファイルの正確な例を示すことはできませんが、そのようなタグを含む Web からの例をいくつか示します。

  1. データキー
  2. データキー
  3. データ URL

PS: Google を試しましたが、有用な結果が見つかりませんでした。

4

4 に答える 4

21

データ属性をいつ使用する必要がありますか?

カスタム データ属性は、ページまたはアプリケーション専用のカスタム データを格納するためのものであり、これ以上適切な属性や要素はありません。

今回は data 属性を使用して、通知バブルのバブル値を示します。

<a href="#" class="pink" data-bubble="2">Profile</a>

この時間は、ツールチップのテキストを表示するために使用されます。

<a href="#" class="tooltip" data-tip="this is the tip!">This is the link</a>

データ属性を使用すべきでない場合

すでに確立されている、またはより適切な属性を持つものには、データ属性を使用しないでください。たとえば、次の使用は不適切です。

<span data-time="20:00">8pm<span>

以下のように、時間要素内で既に定義されているdatetime属性を使用できる場合:

<time datetime="20:00">8pm</time>

CSS でのデータ属性の使用 (属性セレクター)

[data-role="page"] {
  /* Styles */
}

jQuery でのデータ属性の使用 ( .attr() )

<a href="http://www.google.com" class="button" data-info="The worlds most popular search engine">Google</a>

$('.button').click(function(e) {
   e.preventDefault();
   thisdata = $(this).attr('data-info');
   console.log(thisdata);
 });

ここからの例と情報

于 2013-08-14T09:23:22.557 に答える
11

これらはHTML5 カスタム データ属性と呼ばれます。

カスタム データ属性は、ページまたはアプリケーション専用のカスタム データを格納するためのものであり、これ以上適切な属性や要素はありません。これらの属性は、属性を使用するサイトから独立したソフトウェアによる使用を意図していません。すべての HTML 要素には、任意の数のカスタム データ属性を任意の値で指定できます。

Google で見つからない理由は、これらの属性がユーザーが独自に使用するために生成したカスタム属性であるためです。

あなたのコードを見ると、次のようになります。

  • このコードを書いた人は、いくつかの追加情報を要素に保存したいと考えています。彼もこれを処理できるかどうかわかりません Javascript。

  • あなたがすべきことはJavascript、彼がそれらのデータ属性を処理しているかどうか、または可能であれば彼に確認しているかどうか、コードを完全にチェックすることです。

  • コードはjQueryライブラリを使用しているため、.data() メソッドを確認してください。完全なコード レビューの後、役に立たないことがわかった場合は、遠慮なく削除してください。
于 2013-08-14T09:11:49.497 に答える
9

data-*属性は、HTML をホストするサイトで実行されているコード (通常はクライアント側の JavaScript) のみが使用する要素に任意のデータを追加するためのものです。

あなたが与えた3つの例が何のためにあるのかを伝えるために、それらには標準的な意味がないため、それらに付属するコードをリバースエンジニアリングする必要があります（サイトに文書化されていない限り）.

于 2013-08-14T09:08:28.123 に答える
2

HTML 5 で導入された新機能は、カスタム データ属性の追加です。簡単に言うと、カスタム データ属性の仕様では、「data-」で始まる属性はプライベート データのストレージ領域として扱われると規定されています (エンド ユーザーが見ることができないという意味でプライベート - レイアウトには影響しません)。またはプレゼンテーション）。これにより、有効な HTML マークアップ (HTML 5 バリデータを渡す) を記述しながら、同時にページ内にデータを埋め込むことができます。簡単な例:

<li class="user" data-name="John Resig" data-city="Boston" data-lang="js" data-food="Bacon"> <b>John says:</b> <span>Hello, how are you?</span> </li>

于 2013-08-14T09:13:57.983 に答える