6

さまざまな Web ページに埋め込むことができる一種の HTML+JS コントロールを開発しています。私はそれらのページについて何も知りません (まあ、できますが、したくありません)。コントロールは、子要素のサブツリーを含む 1 つのルート要素 (DIV など) で構成されます。私のスクリプトでは、子要素にアクセスする必要があります。問題は、これらの子要素を区別するためにどのようにマークを付けることができるかです。

簡単な解決策は、id-s を使用することです。ここでの問題は、id がドキュメント全体の範囲内で一意でなければならず、コントロールが埋め込まれているドキュメントについて何も知らないことです。したがって、ID の一意性を保証することはできません。ID が一意でない場合は (注意して使用すれば) 機能しますが、これは標準に準拠していないため、たとえば、ブラウザーの新しいバージョンで問題が発生する可能性があります。

別の解決策は、「name」属性を使用することです。一意である必要はありません。それで問題ありません。ただし、標準では、要素タイプの制限されたセットに対してのみ「name」属性の存在が許可されています。たとえば、「name」属性は DIV 要素では無効です。

たとえば、「クラス」属性を使用できます。規格上はOKのようですが、意味的にはOKではありません。「クラス」は他の目的に使用する必要があり、これは混乱を招く可能性があります。

HTLM 要素のローカルIDを実装するための他のオプションを提案できる人はいますか?

4

3 に答える 3

6

HTML5data-*属性を使用して、正しい意味を持つカスタム名を付けることができます。

http://ejohn.org/blog/html-5-data-attributes/

と

https://html.spec.whatwg.org/multipage/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes

そして、次のようなことをしてください：

<div data-localId="myID">
  ...
</div>
于 2012-11-22T20:32:45.323 に答える
0

通常、Web ページ内に隠し情報を含めるには、創造的なアプローチが必要でした。例えば：

  • id、class、rel、title などの HTML 要素属性内に情報を格納することで、属性の本来の意図を上書きします。
  • <span>情報を含むまたは<div>ブロックを使用し、スタイリングによってそのようなブロックをユーザーに見えないようにします(style="display: none;")。
  • JavaScript コードを Web ページに追加して、HTML ID 要素にマップするデータ構造を定義します。
  • 既存の HTML 要素に独自の属性を追加する (HTML 標準自体を破り、構文エラーを無視するために HTML ブラウザーに依存する)。

上記のアプローチは洗練されておらず、適切なコーディング方法でもありませんが、良いニュースは、jQuery には、データを DOM 要素に簡単に関連付ける機能があり、クリーンなクロスブラウザーの方法であるということです。

カスタム データ属性を使用します。

「data-」で始まる属性は、プライベート データのストレージ領域として扱われます (エンド ユーザーが見ることができないという意味でプライベート - レイアウトやプレゼンテーションには影響しません。

  1. html によるカスタム データの定義:

    <div class="bar" id="baz" data-id="foo">  
  ...
</div>

  2. data-id を特定の DOM 要素に関連付ける (jQuery):

    $('#foo').data('id', 'baz');

  3. 特定の data-id を持つ要素を取得する:

    var $item = $('*[data-id="baz"]');
于 2012-11-22T21:49:06.447 に答える