7

HTMLElement オブジェクトを使用してデータを保存する方法は 3 つあります。

データを要素オブジェクトに関連付けるためのベストプラクティスを誰かが提案できますか?

1 と 2 の場合のように HTML 属性を設定しないため、私は 3 番を好みます。これは、オブジェクトのプロパティを設定および取得するのと同じです。

  1. setAttribute('nonStandardDataProperty') を使用します
  2. data-xattribute には、dataset.x などの HTMLElement オブジェクトのデータセット プロパティを使用します。
  3. HTMLElement はオブジェクトなので、任意のプロパティを定義すると、その要素のデータ ストレージとして機能します
4

6 に答える 6

2

オプション＃2は、それがあなたが探しているものであれば、最も「標準に準拠」しているように思えます。さらに、有効なマークアップを維持しながら、HTML 内からこれらの属性を設定できます。それは一般的に私の好みですが、実際にはあなたの状況であなたにとって最も効果的なものです.

于 2013-04-02T14:14:01.367 に答える
1

最も移植性が高いため、オプション #1 を使用します。

ただし、jQuery のメソッドdata-との互換性のために、これらのカスタム属性にHTML5 のプレフィックスを使用します。.data()

于 2013-04-02T14:12:04.687 に答える
0

3 番目のオプションは、データを DOM に保存することです。データがそれほど大きくない場合、これは悪い考えではないかもしれません。そうである場合、データの保存と取得はアプリのパフォーマンスに影響を与える可能性があります。

于 2013-04-02T13:59:03.150 に答える
0

HTML5 data-* Attributes と jQuery の .data() 関数を使用するのが最善の方法だと思います。組み込みの HTML 要素にデータを保存し、将来的に最新のテクノロジに更新するための最良の方法がおそらくあるでしょう。

<div id="myDiv" data-my-var="my-var-value"></div>

次のように JavaScript で使用できます: (jQuery が必要)

console.log( $( '#myDiv' ).data( 'my-var' ) )

編集：そしてこのように設定します

$( '#myDiv' ).data( 'my-var', 'my-new-var-value' );

この場合、 data-* 属性も更新されます

于 2013-04-02T14:16:36.060 に答える
0

オプション 4: DOMNode に識別子を格納します。これを使用して、切り離されたマップで物事を調べることができます (そうです、これが jQuery のやり方です - もちろん、初期化中にすべての data-* 属性をインポートすることに加えて)。

プロパティ名を気にする場合は、＃3で問題ありません。＃2は整数値と文字列値のみを許可する必要があり、＃1は同じ問題を抱えている可能性があります。

新しい仕様が出現し、自分のデータに使用したプロパティ名を主張する可能性が気に入らないという理由だけで、#4 を使用します…</p>

于 2013-04-02T14:18:49.443 に答える
-1

Twitter Bootstrap はオプション 1 を使用します。

Twitter Bootstrapのドキュメントを見ると、非標準のプロパティ html 要素にデータを格納する多くの用途が見られます。

例

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>


<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
于 2013-04-02T14:07:50.903 に答える