空のHTML5データ属性は有効ですか？

115

指定した要素の下にインラインモーダルを表示する単純なjQueryプラグインを記述したいと思います。私の考えは、要素に指定されたデータ属性に基づいてスクリプトを自動初期化することです。

非常に基本的な例：

<p data-modal-target>Hover over me for an inline modal!</p>
<div data-modal-content data-modal-align="right" data-modal-trigger="hover" data-modal-offset="10px"><!-- any desired syntax can go here --></div>

data-modal-target上記の例では有効か、それとも有効でなければならないのdata-modal-target="true"ですか？私はIE9以外のものについては気にしません、私の唯一の要件はそれが有効なHTML5であることです。

html custom-data-attribute html5-data

— アダム
ソース

カスタムデータ属性に値が必要かどうかを確認できませんでした。また、値を省略すべきか、それとも安全のために含めるだけか、まだわかりません。W3Cの仕様は混乱しています（驚きではありません）。値を使用するスクリプトに依存していると思います。（長さ制限のため、コメントの例は以下に続きます）。

— goodeye 2013年

たとえば、デフォルト値のカスタムデータ属性を持つプラグインを使用しています。いくつかの文字列、いくつかのブール値（この質問を探すように導きます）。ブールデータには、デフォルトがtrueかfalseかが混在しています。それが存在するか、値があるかどうかを確認するためのチェックを行っています。値がtrueまたは空（trueの場合）、またはfalseであるかどうかをチェックしています。しかし、空のチェックはコードで明示的です。「組み込み」ではありません。そして、ブール属性が必要とするdata-abc = "data-abc"のように、属性名をチェックしていません。これによりエラーが発生します。

— goodeye 2013年

52

有効ですが、ブール値ではありません。

カスタムデータ属性の仕様では、空の属性の処理に対する変更については触れられていないため、空の属性に関する一般的な規則がここに適用されます。

特定の属性は、値なしで属性名のみを指定することによって指定できます。

次の例では、disabled属性は空の属性構文で指定されています。
<input disabled>
空の属性構文は、次の例のように、空の文字列を属性の値として指定することとまったく同じであることに注意してください。
<input disabled="">

したがって、空のカスタムデータ属性を使用できますが、ブール値として使用するには特別な処理が必要です。

空の属性にアクセスしている場合、その値は""です。これは偽の値であるため、を使用if (element.dataset.myattr)して属性が存在するかどうかを確認することはできません。

element.hasAttribute('myattr')またはif (element.dataset.myattr !== undefined)代わりに使用する必要があります。

ロイドの答えは間違っています。彼はブール属性microsyntaxへのリンクについて言及していdata-*ますが、属性は仕様ではブール値として指定されていません。

— ユーザー
ソース

「空の属性構文は、次の例のように、空の文字列を属性の値として指定することとまったく同じであることに注意してください。」まさに私が探していたものです。具体的には、jQueryのscriptAttrs設定は単純なdefer値が好きではありませんが、a defer: ""はトリックを実行する必要があります。ありがとう！

— sfarbota

111

はい、完全に有効です。あなたの場合、data-modal-targetブール属性を表します：

2.4.2ブール属性

要素にブール属性が存在することは真の値を表し、属性が存在しないことは偽の値を表します。

— ロイド
ソース

3

いいね！リンクをありがとう、私は通常w3.orgを通り抜ける忍耐力がありません:)

— Adam

4

ブール属性を「に変える」という値を省略したことはわかりません-ブール属性は任意ではないようです。それらのリストがあると思います。ブラウザー/スクリプトによってブールデータとして扱われるかカスタムデータとして扱われるかは問題ではないかもしれません。多分それはそれを読むスクリプトに依存します。

— goodeye 2013年

3

これは変わったと思います。確かに、私のコードで使用している例は、ブール値としてではなく、空の文字列として扱われています。したがって、テストif ($('p').data('modal-target'))は機能しません：stackoverflow.com/questions/16864999/…。

— デレクヘンダーソン

4

これは真実ではないように見えますelement.dataset.modalTargetが、空の文字列が生成されます（Chrome 32）jQueryと同じ結果になります

— H1D

20

これは仕様の誤解のようです。リンク先のセクションではブール属性について説明していますが、カスタムデータ属性をブール属性にできるかどうかについては触れていません。

— BoltClock

1

はい、カスタムデータ属性の値を省略するのは有効な構文です。

「属性は4つの異なる方法で指定できます。

空の属性構文属性名のみ。値は暗黙的に空の文字列です。[...] " https://developers.whatwg.org/syntax.html#attributes-0

— Eew
ソース

1

一方では、バリデーター16.5.7を渡しますhttps://validator.w3.org/nu/#textarea：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <title>a</title>
</head>
<body data-asdf>
</body>
</html>

他では、HTML5はの仕様では言っていないdata-：彼らはブール値であることを属性https://www.w3.org/TR/html5/dom.html#custom-data-attributeそれは他のブールのために非常に明確にそれを言いながら、https://www.w3.org/TR/html5/forms.html#attr-input-checkedなどの属性checked

— Ciro Santilli海东冠状病六四事件法轮功
ソース