HTML/Universalattribute/data-Attribute

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.

  • HTML5
  • Chrome
  • Firefox
  • IE 11
  • Opera
  • Safari

Details: caniuse.com

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]

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[Bearbeiten]

mit JavaScript[Bearbeiten]

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[Bearbeiten]

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.

Quellen[Bearbeiten]

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

Weblinks[Bearbeiten]

siehe auch[Bearbeiten]