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