18

したがって、私が使用するカスタムデータ属性は「data-」で始まる必要があります。

<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>

これを無視すると何か悪いことが起こりますか？すなわち：

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

悪い点の1つは、カスタム属性が特別な意味を持つHTML属性（たとえばname）と競合する可能性があることですが、これとは別に、「data-example_text」ではなく「example_text」と書くだけで問題が発生しますか？（検証されませんが、誰が気にしますか？）

4

2 に答える 2

23

カスタム属性の前にdata-*を付けることにはいくつかの利点があります。

  1. これにより、将来のエディションでHTMLの拡張機能との衝突が発生しないことが保証されます。これは、HTML5で導入された新しい属性のいくつかですでにある程度発生している問題であり、既存のサイトは同じ名前の属性を使用しており、異なる互換性のないカスタム動作を期待していました。（たとえば、要素のrequired属性inputは、過去にいくつかの人気のあるWebサイトでいくつかの衝突があったことが知られています）

  2. スクリプトからこれらの属性にアクセスするための便利なDOMAPI、HTMLElement.datasetがあります。現在、ほとんどのブラウザでサポートされています。

  3. これらは、どの属性がカスタム属性であり、どの属性が標準化された属性であるかを明確に示します。これは、バリデーターがデータを含む任意の属性を許可できるようにするだけでなく、他の属性の有用なエラーチェック（タイプミスをキャッチするなど）を実行しながら、ソースコードのこの側面を人々を含むそれを読む人にとってより明確にするのにも役立ちます元の作者の後にウェブサイトで作業する可能性のある人。

于 2010-03-15T23:28:24.480 に答える
4

John Resig氏によると、これらのカスタム データ属性を HTML5 SEPC に追加する全体的な目的は、有効なままでカスタム データを HTML に埋め込むことができるようにすることです。

検証を気にしない場合 (そして、あなたが言ったように、カスタム属性が 、 、 などの既存の HTML 属性と衝突しないname場合id) 、プレフィックスstyleを使用する必要はないと思います。data-しかし、これが有効で互換性のあるコードを作成するための莫大なコストではないことを考えると、あなたがそれをしない理由がわかりません。

于 2010-03-15T21:44:09.953 に答える