HTML -Datenattributehandbuch

Inhaltsverzeichnis

1. Einführung
2. Grammatik
3. Stil verwenden Datenattribute
4. Zugriff auf Dateneigenschaften in JavaScript

Einführung

HTML -Elemente können Attribute haben, die für jeden Zweck verwendet werden, von Zugänglichkeitsinformationen bis hin zu Stilsteuerung.

<div aria-label="Names" role="region"></div>

Der nicht nachgewiesene Ansatz besteht darin, Ihre eigenen Eigenschaften zu erstellen oder bestehende Eigenschaften für nicht verwandte Merkmale wieder zu verwenden.

<div highlight="true"></div>
<div width="large"></div>

Es gibt viele schlechte Gründe dafür. Ihr HTML wird ungültig, was möglicherweise keine tatsächlichen negativen Auswirkungen hat, aber dieses warme und unscharfe Gefühl effektiver HTML verliert. Der überzeugendste Grund ist, dass HTML eine sich entwickelnde Sprache ist und nur weil Eigenschaften und Werte, die heute nicht funktionieren, nicht bedeuten, dass sie in Zukunft niemals arbeiten werden.

Die gute Nachricht ist: Sie können Ihre eigenen Eigenschaften erstellen. Sie müssen sie nur mit data-* präfixen und können tun, was Sie wollen!

Grammatik

Es ist sehr bequem, Ihre eigenen HTML -Attribute erstellen zu können und Ihre eigenen Informationen hineinzugeben. Zum Glück können Sie es tun! Dafür werden Datenattribute verwendet. Sie sehen so aus:

<div data-foo=""></div>
<div data-size="large"></div>

Datenattribute werden häufig als data-* bezeichnet, da sie sich immer in diesem Format befinden. Die data , dann ein Armaturenbrett - und dann ein anderer Text, den Sie sich vorstellen können.

Können Sie das Datenattribut allein verwenden?

<div data=""></div>

Dies mag keinen Schaden zufügen, aber Sie können die JavaScript -API, die wir später in diesem Handbuch behandeln, nicht erhalten. Sie erstellen tatsächlich Attribute für sich selbst, was entmutigt ist, wie ich in der Einführung erwähnt habe.

Was sollte nicht mit Datenattributen getan werden

Speichern Sie Inhalte, die zugänglich sein sollten. Wenn der Inhalt auf der Seite angezeigt oder gelesen werden sollte, stellen Sie sie nicht nur in die Dateneigenschaften ein und stellen Sie sicher, dass sich der Inhalt irgendwo im HTML -Inhalt befindet.

<div data-name="Chris Coyier"></div>
<div>
  Chris Coyier
</div>

Hier finden Sie weitere Informationen zu versteckten Inhalten.

Stil verwenden Datenattribute

CSS kann HTML -Elemente basierend auf Attributen und ihren Werten auswählen.

 /* Wählen Sie jedes Element mit diesem Datenattribut und Wert und Wert*/aus
[datengröße = "groß"] {
  Polsterung: 2Rem;
  Schriftgröße: 125%;
}
/* Sie können es auf ein Element oder eine Klasse oder irgendetwas anderes beschränken*/
Taste [Data-Type = "Download"] {}
.Card [data-pad = "extra"] {}

Dies kann attraktiv sein. Die Haupthaken im Hauptstil in HTML/CSS sind Klassen, und während der Klassen großartig sind (sie haben eine mittlere Spezifität und eine schöne JavaScript -Methode über classList ), haben die Elemente sie entweder oder haben sie (im Grunde genommen an oder aus ). Mit data-* können Sie diese Funktions-/Aus-Funktion sowie die Möglichkeit erhalten, basierend auf ihrem Wert auf derselben Spezifitätsebene auszuwählen.

 / * Wenn die Eigenschaft existiert, wählen Sie */
[Datengröße] {}
/* Wählen Sie, ob das Attribut einen bestimmten Wert hat*/
[Data-state = "Open"],
[aria-expanded = "true"] {}
/ * "Starten Sie mit ..." Selektor, was bedeutet, dass dies mit "3" oder einem beliebigen Zeichen mit 3 übereinstimmt, z. B. "3.14" */
[Data-Version^= "3"] {}
/ * "Integrieren" bedeutet, wenn der Wert die Zeichenfolge überall enthält */
[Data-company*= "Google"] {}

Spezifität des Attributauswählers

Es ist genau das gleiche wie die Klasse. Wir betrachten die Spezifität normalerweise als vierteiliger Wert:

Inline -Stil, ID, Klasse/Eigenschaften, Tags

Daher sind die einzelnen Eigenschaftsauswahler 0, 0, 1, 0 . Selektoren wie diese:

 div.card [data-foo = "bar"] {}

wird 0, 0, 2, 1 sein. 2 liegt daran, dass es eine Klasse ( .card ) und eine Eigenschaft gibt ( [data-foo="bar"] ), und 1 liegt daran, dass es ein Tag ( div ) gibt.

Die Spezifität des Attributauswählten ist niedriger als die ID, höher als das Element/Tag, das gleich wie bei der Klasse.

Fall-unempfindliche Eigenschaftswerte

Wenn Sie mögliche Fall-Inkonsistenzen in Dateneigenschaften korrigieren müssen, bietet der Eigenschaftsselector dafür eine unempfindliche Variante.

 /* Wird übereinstimmen<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state = "öffnen" i] {}

Es ist der Kleinbuchstaben i in der Square Bracket Selector.

Visualisieren Sie Nutzungsdateneigenschaften

Mit CSS können Sie Datenattributwerte extrahieren und bei Bedarf anzeigen.

 /*<div data-emoji="✅"> */
[Data-emoji] :: vor {
  Inhalt: Attr (Data-emoji); / * Return '✅' */
  Rand-Rechts: 5px;
}<h4 id="Beispiel-für-die-Style-Nutzung"> Beispiel für die Style -Nutzung</h4>
<p> Sie können das Datenattribut verwenden, um die Anzahl der für den Rastercontainer erforderlichen Spalten anzugeben.</p>
<pre class="brush:php;toolbar:false"><div data-columns="2"></div>
<div data-columns="3"></div>
<div data-columns="4"></div>

Zugriff auf Dateneigenschaften in JavaScript

Wie jedes andere Attribut können Sie mit der gemeinsamen Methode getAttribute auf den Wert zugreifen.

 Sei Value = El.GetAttribute ("Data-State");
// Sie können auch den Wert festlegen.
// return Data-state = "Collapsed"
El.SetAttribute ("Data-State", "Collaped");

Datenattribute haben aber auch ihre eigenen speziellen APIs. Angenommen, Sie haben ein Element mit mehreren Datenattributen (dies ist absolut in Ordnung):

Wenn Ihr Element eine Referenz hat, können Sie die Eigenschaften wie diese festlegen und erhalten:

 // Span.dataset.info; // 123
span.dataset.index; // 2
// set span.dataset.prefix = "Mr.";
span.dataset.emojiicon = "?";

Beachten Sie die Kamel -Nomenklatur in der letzten Zeile. Es konvertiert automatisch das Attribut im Kebab-Stil in HTML (z. B. data-this-little-piggy ) in die Kamel-Nomenklatur in JavaScript (z. B. dataThisLittlePiggy ).

Diese API ist wohl nicht so gut wie classList , classList klare Methoden zum Hinzufügen, Löschen, Umschalten und Ersetzen aufweist, aber sie ist besser als nichts.

Sie können auch Inline -Datensätze zugreifen:

JSON -Daten in Dateneigenschaften

Warum nicht? Es ist nur eine Zeichenfolge, die in gültige JSON (beachten Sie die Zitate usw.). Sie können die Daten extrahieren und nach Bedarf analysieren.

 const el = document.querySelector ("li");
lass JSON = El.Dataset.person;
lass Data = json.Parse (JSON);
console.log (data.name); // Chris Coyier
console.log (data.job); // Webperson

JavaScript -Anwendungsfälle

Das Konzept ist, dass Sie Dateneigenschaften verwenden können, um Informationen in HTML zu setzen, auf die JavaScript möglicherweise zugreifen muss, um bestimmte Vorgänge auszuführen.

Ein häufiges Beispiel hängt mit der Datenbankfunktionalität zusammen. Angenommen, Sie haben einen "Gefällt mir" -Taste:

♡

Diese Schaltfläche kann auf Handler klicken, die AJAX -Anforderungen an den Server durchführt, wenn sie auf die Anzahl der Likes in der Datenbank in Erhöhen von Likes in Erhöhen durchführt. Es weiß, welcher Datensatz zu aktualisieren ist, da es von den Dateneigenschaften erhält.

Spezifikation

• Auswahlstufe 4 (Arbeitsentwurf)
• Auswahlstufe 3 (empfohlen)
• Selektorstufe 2, Revision 1 (erste Definition)

Browserunterstützung

Dieser Browser unterstützt Daten von Caniuse, die weitere Details enthält. Die Zahl zeigt an, dass der Browser diese Funktion in dieser und späteren Versionen unterstützt.

Desktop

Mobilfunk/Tablet -PC