web-dev-qa-db-ja.com

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

指定した要素の下にインラインモーダルを表示する単純な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であることです。

html5custom-data-attributehtml5-data
108
Adam

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

2.4.2ブール属性

要素上のブール属性の存在は真の値を表し、属性の不在は偽の値を表します。

104
Lloyd

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

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

次の例では、disabled属性が空の属性構文で指定されています。

_<input disabled>
_

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

_<input disabled="">
_

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

_element.dataset_を介して属性にアクセスしている場合：

  • 空の属性が存在する場合、値は_""_です。
  • 属性が存在しない場合、undefinedを取得しています。

したがって、常にfalseになるため、if (element.dataset.myattr)としてチェックすることはできません。

if (element.dataset.myattr !== undefined)としてブール属性をチェックできます。

ロイドの答えは間違っています。彼はブール属性のマイクロシンタックスへのリンクに言及していますが、_data-*_属性は仕様でブールとして指定されていません。

42
user

一方では、バリデーター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 それは、checkedのような他のブール属性については非常に明確に言っているが https://www.w3.org/TR/html5/forms.html#attr-input-checked

1
Ciro Santilli 新疆改造中心996ICU六四事件

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

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

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

1
eew