👨‍👨‍👦 🦃 🚻 Eine vollständige Anleitung zu Daten- * HTML-Attributen 👩🏼‍🤝‍👨🏾 🧚 🤲🏾

Wir präsentieren Ihnen eine Übersetzung des Artikels über die Verwendung von Attributen data-*. Dies sind Attribute, mit denen verschiedene nützliche Informationen bequem in Standard-HTML-Elementen gespeichert werden können. Diese Informationen können insbesondere in JavaScript und CSS verwendet werden.

Allgemeine Information

HTML-Elemente können Attribute aufweisen, mit denen eine Vielzahl von Problemen gelöst werden können - von der Bereitstellung von Daten über unterstützende Technologien bis hin zu Stilelementen.

<!--  `class`      CSS,  `role`    -->
<div class="names" role="region" aria-label="Names"></div>

Es wird nicht empfohlen, eigene Attribute zu erstellen oder vorhandene Attribute auf eine Weise anzuwenden, für die sie nicht vorgesehen sind.

<!-- `highlight`   HTML--->
<div highlight="true"></div>

<!-- `large`      `width` -->
<div width="large">

Das ist aus vielen Gründen schlecht. HTML wird falsch generiert. Und obwohl dies möglicherweise keine wirklichen negativen Konsequenzen hat, entzieht dies dem Entwickler ein warmes Gefühl, das durch die Tatsache verursacht wird, dass er gültigen HTML-Code erstellt. Der Hauptgrund, warum Sie dies nicht tun sollten, ist, dass HTML eine Sprache ist, die sich ständig weiterentwickelt. Wenn ein bestimmtes Attribut heute in der Sprache nicht verwendet wird, bedeutet dies nicht, dass sich in Zukunft nichts ändern wird.

Wenn jemand solche Attribute verwenden muss, hat er zwar eine ganz normale Vorgehensweise. Es geht darum, eigene Attribute zu erstellen, deren Namen mit einem Präfix beginnen data-. Sie können problemlos mit diesen Attributen arbeiten und sie so anwenden, wie es der Programmierer benötigt.

Syntax

Die Möglichkeit, eigene HTML-Attribute zu erstellen und Daten in diese zu schreiben, kann äußerst nützlich sein. Dies ist, wie Sie wissen, aufgrund von Attributen möglich data-*. Dafür sind solche Attribute vorgesehen. Es sieht aus wie das:

<!--      -->
<div data-foo></div>

<!-- ...     -->
<div data-size="large"></div>

<!--      HTML,    HTML-, , ,      -->
<li data-prefix="Careful with HTML in here."><li>

<!--   -      -->
<aside data-some-long-attribute-name><aside>

Diese Attribute data-werden häufig als Attribute data-*oder Datenattribute bezeichnet, gerade weil sie immer mit einem Präfix beginnen . Bei der Bildung der Namen dieser Attribute kommt zuerst das Wort data, dann dash ( -) und dann der Rest des Namens, die nach Bedarf des Entwicklers angeordnet sind.

Kann ich ein Attribut namens data verwenden?

Hier ist ein Beispielcode, der ein Attribut mit dem Namen verwendet data:

<div data=""></div>

Ein Attribut mit diesem Namen wird wahrscheinlich niemanden verletzen, aber seine Verwendung ermöglicht es Ihnen nicht, JavaScript-Tools zu verwenden, die wir unten diskutieren werden. In diesem Beispiel erstellt der Entwickler tatsächlich ein eigenes Attribut, das, wie bereits erwähnt, nicht empfohlen wird.

Was Sie nicht mit Daten- * Attributen tun sollten

Solche Attribute sollten keinen Inhalt enthalten, auf den unterstützende Technologien zugreifen können sollten. Wenn einige Daten auf der Seite sichtbar sein sollen oder für Mittel zum Lesen vom Bildschirm zugänglich sein sollen, reicht es nicht aus, sie nur in das Attribut einzufügen data-*. Solche Daten sollten auch im regulären HTML-Markup erscheinen.

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

<!--      ,       ,    ... -->
<div>
  <span class="visually-hidden">Chris Coyier</span>
</div>

Hier finden Sie Informationen zum Ausblenden von Webseitenelementen.

Styling-Elemente mit Daten- * Attributen

In CSS können Sie HTML-Elemente basierend auf Attributen und ihren Werten auswählen .

/*      ,    */
[data-size="large"] {
  padding: 2rem;
  font-size: 125%;
}

/*    , ,  -  */
button[data-type="download"] { }
.card[data-pad="extra"] { }

Das mag interessant erscheinen. Für das Styling in HTML / CSS werden hauptsächlich Klassen verwendet. Und obwohl Klassen ein wunderbares Werkzeug sind (sie unterscheiden sich in der durchschnittlichen Spezifität, Sie können mit ihnen mithilfe praktischer JavaScript-Methoden über die Eigenschaft von Elementen arbeiten classList), kann ein Element entweder eine bestimmte Klasse haben oder nicht (das heißt, die Klasse im Element ist entweder "enthalten"). oder "aus"). Bei der Verwendung von Attributen data-*hat der Entwickler auch die Möglichkeit von Klassen („Ein / Aus“) und die Möglichkeit, Elemente basierend auf dem Wert des Attributs auszuwählen, das er auf derselben Spezifitätsstufe hat.

/*  ,      */
[data-size] { }

/*  ,      */
[data-state="open"],
[aria-expanded="true"] { }

/*  " ",      ,    "3",    -   ,   3 -  "3.14" */
[data-version^="3"] { }
/*  ""   ,      -    */
[data-company*="google"] { }

Spezifität von Attributselektoren

Die Spezifität der Attributselektoren ist dieselbe wie für Klassen. Die Spezifität wird oft als 4-teiliger Wert betrachtet:

Inline-Stil
ICH WÜRDE
Klassen und Attribute
Stichworte

Wenn Sie sich den Wert der Spezifität für ein Element vorstellen, das nur mithilfe eines Attributselektors stilisiert wurde, sieht es folgendermaßen aus 0, 0, 1, 0.

Und hier ist noch ein Selektor:

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

Es wird bereits durch Bedeutung beschrieben 0, 0, 2, 1. Die Nummer wird 2hier angezeigt, da sowohl eine Klasse ( .card) als auch ein Attribut vorhanden sind ([data-foo="bar"]. Und 1hier aufgrund der Tatsache, dass es nur ein Tag gibt ( div).

Um es klarer zu machen, hier eine illustrierte Version dieser Argumente.

1 Tag, 1 Klasse und 1 Attribut

Bei Attributselektoren ist die Spezifität niedriger als bei Bezeichnern (ID), jedoch höher als bei Tags (Elementen). Ihre Spezifität entspricht der Spezifität der Klassen.

Attributwerte ohne Berücksichtigung der Groß- und Kleinschreibung

Wenn Sie möchten, dass Selektoren Attribute auswählen, deren Werte Zeichenfolgen enthalten können, die mit verschiedenen Kombinationen von Klein- und Großbuchstaben geschrieben wurden, können Sie die Auswahloption verwenden, bei der die Groß- und Kleinschreibung nicht berücksichtigt wird.

/*     
<div data-state="open"></div>
<div data-state="Open"></div>
<div data-state="OPEN"></div>
<div data-state="oPeN"></div>
*/
[data-state="open" i] { }

Dieses Verhalten stellt sicher, dass ein Zeichen in der Auswahl verwendet wird i.

In Daten- * Attributen gespeicherte Daten anzeigen

Mit CSS können Sie Attributwerte abrufen data-*und auf der Seite anzeigen.

/* <div data-emoji=":-)"> */

[data-emoji]::before {
  content: attr(data-emoji); /*  ':-)' */
  margin-right: 5px;
}

Beispiele für die Verwendung von data- * -Attributen für Stilelemente

Attribute data-*können verwendet werden, um anzugeben, wie viele Spalten ein gridContainer haben soll . Hier ist der HTML-Code:

<div data-columns="2">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="3">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

<div data-columns="4">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

Hier ist das relevante CSS:

[data-columns] {
  display: grid;
  grid-gap: 1rem;
  padding: 1rem;
  margin: 0 0 1rem 0;
}

[data-columns] > div {
  height: 100px;
  background: white;
}

[data-columns="2"] {
  background: #64B5F6;
  grid-template-columns: repeat(2, 1fr);
}

[data-columns="3"] {
  background: #9CCC65;
  grid-template-columns: repeat(3, 1fr);
}

[data-columns="4"] {
  background: #FFB74D;
  grid-template-columns: repeat(4, 1fr);
}

Und hier ist ein Fragment der resultierenden Seite.

Rastercontainer, die mithilfe der data- * -Attribute konfiguriert werden. Sie können

mit diesem Beispiel in CodePenexperimentieren.

Arbeiten mit Daten- * Attributen in JavaScript

Auf Attributwerte data-*kann wie auf die Werte anderer Attribute mit der Methode getAtributezum Lesen von Daten und der Methode setAttributezum Schreiben zugegriffen werden .

//   
let value = el.getAttribute("data-state");

//   .

//  data-state   "collapsed"
el.setAttribute("data-state", "collapsed");

Attribute data-*haben jedoch eine eigene spezielle API. Angenommen, wir haben ein Element mit mehreren Attributen data-*(was völlig normal ist):

<span 
  data-info="123" 
  data-index="2" 
  data-prefix="Dr. "
  data-emoji-icon=":-)"
></span>

Wenn ein Link zu diesem Element vorhanden ist, können Sie die Werte seiner Attribute wie folgt lesen und schreiben:

// 
span.dataset.info; // 123
span.dataset.index; // 2

// 
span.dataset.prefix = "Mr. ";
span.dataset.emojiIcon = ";-)";

Beachten Sie, dass in der letzten Zeile des JS-Codes der Namensname für den CamelCase-Stil verwendet wird. Das System konvertiert automatisch die Namen der im Kebab-Stil geschriebenen HTML-Attribute in die im Kamelstil geschriebenen Namen. Das heißt - es data-this-little-piggywird dataThisLittlePiggy.

Dies ist die API, ist natürlich nicht so einfach , wie der API classlist , klare Methoden unterstützen wie add, remove, toggleund replace, aber es ist immer noch besser als nichts.

In JavaScript können Sie mit Datensätzen arbeiten, die in Elemente eingebettet sind:

<img align="center" src="spaceship.png"
  data-ship-id="324" data-shields="72%"
  onclick="pewpew(this.dataset.shipId)">
</img>
<h2><font color="#3AC1EF">JSON-   data-*</font></h2>
<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

Warum nicht data-*JSON-Daten in das Attribut schreiben ? Dies sind schließlich nur Zeichenfolgen, die als gültige JSON-Daten formatiert werden können (mit Anführungszeichen und mehr). Bei Bedarf können diese Daten aus dem Attribut extrahiert und analysiert werden.

const el = document.querySelector("li");

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

Informationen zur Verwendung von data- * -Attributen in JavaScript

Hier geht es darum, mithilfe von Attributen data-*Daten in HTML-Code zu platzieren, auf die über JavaScript zugegriffen werden kann, um bestimmte Aktionen auszuführen.

Eine gemeinsame Implementierung dieses Szenarios zielt darauf ab, die Arbeit mit Datenbanken zu organisieren. Angenommen, wir haben einen Knopf Like:

<button data-id="435432343">Like</button>

Diese Schaltfläche verfügt möglicherweise über einen Klick-Handler, der eine AJAX-Anforderung an den Server ausführt. Wenn der Benutzer mit der Schaltfläche etwas mag, erhöht der Handler die Anzahl der Likes in der Serverdatenbank. Der Handler weiß, welcher bestimmte Datensatz aktualisiert werden muss, da er Informationen dazu aus dem Attribut entnimmt data-*.

Zusammenfassung

Hier , hier und hier sind die Standards, die Attributselektoren zugeordnet sind data-*. Hier auf der Caniuse-Website erfahren Sie mehr über die data-*Browserunterstützung für Attribute . Wenn Sie diese Attribute noch nicht verwendet haben, hoffen wir, dass dieses Material Sie zum Nachdenken angeregt hat.

Liebe Leser! Wie verwenden Sie die Daten- * HTML-Attribute?

Eine vollständige Anleitung zu Daten- * HTML-Attributen