HTML/Attribute/data-*

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Mit data-Attributen (Custom Data Attributes) haben Sie die Möglichkeit, Elementen eigene Attribute mitzugeben, die dann per Script ausgewertet oder mit CSS genutzt werden können.[1] In diesen Attributen können Sie Informationen, die nicht visuell präsentiert werden sollen, zur Verfügung stellen.

Anders als Mikroformate sind data-Attribute interne Angaben und werden von Suchmaschinen nicht ausgewertet. Sie können beliebig viele data-Attribute definieren; diese müssen nur mit data- beginnen und aus Kleinbuchstaben bestehen.[2]

erlaubte Werte
default-Wert
erlaubt in allen Elementen
Browsersupport Details bei caniuse.com: {{{caniuse}}}
Beispiel
<article
  id="neue-Elemente"
  data-columns="3"
  data-index-number="12314"
  data-parent="html5">
...
</article>


Empfehlung: Sie können data-Attribute mit der JavaScript-Methode getAttribute auslesen.

Weblinks

  1. W3C: Custom data-Attributes
  2. MDN: Using data-Attributes

Anwendungsbeispiel

Beispiel ansehen …
<p>Viele Leute verwenden für einfache Sachverhalte einen komplizierten 
  <span class="tooltip" tabindex="0" 
        data-tooltip="Ausdruck, der durch ein Fachgebiet bestimmt wird">Fachbegriff</span>,
  den man erst einmal nachschlagen muss.</p>
<p>Mit einem 
  <span class="tooltip" tabindex="0" 
        data-tooltip="kleines Pop-up-Fenster in Anwendungsprogrammen oder Webseiten">Tooltip</span>
  haben Sie die Erklärung gleich zur Verfügung.</p>


Data-Attribute auslesen

mit JavaScript

Das Auslesen von data-Attributen geht sehr einfach. Entweder Sie lesen das Attribut mit getAttribute aus oder sie verwenden das eigens dafür geschaffene dataset.

Beispiel
var wort = document.getElementById('fachbegriff');
 
var erklaerung = wort.dataset.tooltip;
Beachten Sie: Mit Bindestrich zusammengesetzte data-Attribute werden in JavaScript zu camelCase.

mit CSS

Beispiel ansehen …
  .tooltip {
    position: relative;
    color: #3983ab;
  }
  .tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 130%;
    left: 20%;
    background: #3983ab;
    padding: 0.2em 0.4em;
    color: #dfac20;
    border-radius: 0.3em;
    white-space: nowrap;
    opacity: 0;
    transition: all 0.3s;
  }
Werden die Elemente der Klasse tooltip mit dem Mauszeiger berührt oder mit der Tastatur fokussiert, werden die Pseudoelemente ::after und ::before eingeblendet. Der Inhalt wird durch die attr-Funktion mit dem data-Attribut tooltip gefüllt.