13

html データ属性に実際に値を適用する必要があるかどうか疑問に思っていますか?

多くの場合、属性が実際にフラグとして機能するように設定されているかどうかだけを知りたいので、これは不思議です。(確かにこれにはクラスを使用できますが、現実的には、これらのアイテムを別の方法でスタイル設定しない限り、フラグはセマンティック アイテムよりも多くのデータになります)。

これの完璧な例は、リンクをジャンプするのではなく、ターゲットまでスクロールする場合です。jQuery コードは次のようになります。

$(document).on('click', '[data-scroll-link'], function(){/**do scroll**/});

Google chromeでは、アンカーが次のように表示されれば十分であることを知っています

<a href="#bottom" data-scroll-link>Scroll to bottom</a>

しかし、それはどこでも機能しますか？それは有効なHTML5でもありますか（オートフォーカス、オートプレイなどの属性によるものだと思います）。または必要ですか：

<a href="#bottom" data-scroll-link="true">Scroll to bottom</a>
4

2 に答える 2

17

いいえ、しかし...

すべての属性に共通することですが、application/xhtml+xmlシリアル化では XML ルールが適用され、属性には明示的な名前と (引用符で囲まれた) 値が必要です。

したがって、この質問はtext/htmlシリアライゼーションに関するものなので、HTML5 仕様の関連部分はセクション 8 The HTML syntaxです。

特に、attributesの下には、次のように書かれています。

属性は、次の 4 つの方法で指定できます。

これらの最初のものは次のとおりです。

空の属性構文

   属性名だけ。値は暗黙的に空の文字列です。

ただし、値はブール型ではなく文字列型であることを理解する必要があります。

たとえば<input id="cb" type="checkbox" checked>、「checked」属性は、true または false のいずれかのプロパティによって反映されます。そう

if (document.getElementById("cb").checked)

上記のマークアップに対してtrueと評価されます。

対照的に<input id="cb" type="checkbox" data-checked>、「data-checked」属性は、データセット オブジェクトを介して文字列として反映されます。このプロパティの値は空の文字列で、JavaScript では false です。そう、

if (document.getElementById("cb").dataset.checked)

上記のマークアップではfalseと評価されます。

同等のテストを行うには、「not undefined」の値を比較します。いえ

if (document.getElementById("cb").dataset.checked !== undefined)

上記のマークアップに対してtrueと評価されます。

http://jsfiddle.net/GAxvW/を参照してください

于 2013-07-26T09:08:14.157 に答える
2

要素属性の単純なブール テスト

Alohci の優れた回答を拡張するために、次trueの 3 つの標準 HTML 規則のいずれかを使用して提供されるブール属性値<foo data-bar/>を<foo data-bar="true"/>テストする簡単で柔軟な方法を次に示します<foo data-bar="data-bar"/>。

var a = elem['data-bar'];
var aTrue = ( a != null && a !== false && a !== 0 && a.charAt(0) != 'f' &&
              a.charAt(0) != 'n' );

上記のコードでは、値は次のいずれfalseかundefinedに設定されているf*, n*, 0場合 (大文字と小文字は区別されません)、およびtrue定義されて次のいずれかに設定されている場合です(empty string), (attribute name), (anything else)。

空の文字列は、true値のない HTML 属性がJS''で等しいため、ここで評価されます (また、等しいはずです)。を削除することにより、上記のコードをより一般的な文字列テストに使用できます。false<foo disabled/><foo disabled="true"/>!= null && a !== false

于 2014-12-02T21:04:11.123 に答える