wake-up-neo.com

Sind leere HTML5-Datenattribute gültig?

Ich möchte ein einfaches jQuery-Plugin schreiben, das Inline-Modalitäten unter bestimmten Elementen anzeigt. Meine Idee ist, dass das Skript basierend auf Datenattributen, die für Elemente angegeben wurden, automatisch initialisiert wird.

Ein sehr einfaches Beispiel:

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

Ich frage mich nur, ob data-modal-target Im obigen Beispiel gültig ist oder muss es data-modal-target="true" Sein? Ich interessiere mich nicht für irgendetwas schlechteres als IE9 usw., meine einzige Anforderung ist, dass es gültiges HTML5 ist.

108
Adam

Ja, vollkommen gültig. In deinem Fall, data-modal-target würde ein boolesches Attribut darstellen:

2.4.2 Boolesche Attribute

Das Vorhandensein eines booleschen Attributs für ein Element stellt den wahren Wert dar, und das Fehlen des Attributs stellt den falschen Wert dar.

104
Lloyd

Benutzerdefinierte Datenattributspezifikation erwähnt keine Änderungen an der Behandlung leerer Attribute, daher allgemeine Regeln zu leeren Attributen gelten hier:

Bestimmte Attribute können angegeben werden, indem nur der Attributname ohne Wert angegeben wird.

Im folgenden Beispiel wird das Attribut disabled mit der leeren Attributsyntax angegeben:

<input disabled>

Beachten Sie, dass die leere Attributsyntax genau der Angabe der leeren Zeichenfolge als Wert für das Attribut entspricht, wie im folgenden Beispiel gezeigt.

<input disabled="">

Sie können also leere benutzerdefinierte Datenattribute verwenden, diese müssen jedoch speziell behandelt werden, um sie als Boolesche Werte zu verwenden.

Wenn Sie über element.dataset Auf das Attribut zugreifen:

  • Wenn ein leeres Attribut vorhanden ist, ist sein Wert "".
  • Wenn ein Attribut fehlt, wird undefined angezeigt.

Daher können Sie nicht einfach als if (element.dataset.myattr) prüfen, da dies immer false ist.

Sie können und sollten boolesche Attribute als if (element.dataset.myattr !== undefined) prüfen.


Lloyd's Antwort ist falsch. Er erwähnt die Verknüpfung mit der Mikrosyntax der Booleschen Attribute, aber die Attribute data-* Werden in spec nicht als Boolesche Attribute angegeben.

42
user

Zum einen besteht es den Validator 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>

Andererseits sagt HTML5 in der Spezifikation von data- - Attributen nicht, dass sie boolesch sind: https://www.w3.org/TR/html5/dom.html#custom-data- Attribut während es sagt, dass sehr deutlich für andere boolesche Attribute wie checkedhttps://www.w3.org/TR/html5/forms.html#attr-input-checked =

Ja, es ist eine gültige Syntax, den Wert für ein benutzerdefiniertes Datenattribut wegzulassen.

"Attribute können auf vier verschiedene Arten angegeben werden:

Leere Attributsyntax Nur der Attributname. Der Wert ist implizit die leere Zeichenfolge. [...] " https://developers.whatwg.org/syntax.html#attributes-

1
eew