Javascript data-attribute

Data Attribute enthalten Informationen für Javascript.

data-Attribute sind Zeichenketten oder Strings, die alles speichern, was in einem String stehen kann – ähnlich wie JSON. Die Konvertierung in andere Datentypen (z.z. Integer oder Float) muss vom Javascript durchgeführt werden.

Data Attribute richten sich nicht direkt an Benutzer, sondern an Anwendungen und Scripte und fügen dem HTML-Tag und der Darstellung keine weiteren Merkmale hinzu.

Sie liefern Informationen von und zu Content Management Systemen und befreien CSS-Klassen von zusätzlichen Informationen. Diese privaten Attribute lassen sich mit getAttribute lesen und mit setAttribute setzen und ändern.

data-Attribute beginnen grundsätzlich mit data-:

<li><a href="CIE-Normfarbtafel.php" data-system-path="node/12">Normfarbtafel</a></li>
<li><a href="rgb-nach-cmyk.php" data-system-path="node/28">Von RGB nach CMYK</a></li>
<li><a href="gamma.php" data-system-path="node/123">Monitor Gamma</a></li>

Hier liefert das Data-Attribut des HTML-Tags neben der URL einen Shortlink mit.

Neben dem data-Prefix darf das data-Attribut nur aus Buchstaben, Ziffern, Bindestrich, Punkt, Doppelpunkt und Underscore enthalten, aber keine Großbuchstaben.

data-Attribute können mit getAttribute ausgelesen und mit setAttribute gesetzt werden.

let data = document.querySelectorAll("a[data-system-path]");
for (let i=0; i<data.length; i++) {
   console.log (data[i].getAttribute("data-system-path"));
}

dataset

Direkter und einfacher als getAttribute greift die Eigenschaft dataset zu – wenn IE10 außer Acht gelassen werden kann, denn IE10 unterstützt dataset noch nicht und Data Attribute müssen für IE10 weiterhin mit getAttribute und setAttribute angesprochen werden.

let data = document.querySelectorAll("a[data-system-path]");
for (let i=0; i<data.length; i++) {
   console.log (data[i].dataset.systemPath);
}

Wenn das Data-Attribut mit Bindestrichen geschrieben ist (so wie hier data-system-path), wird es im camelCase geschrieben. Camel Case eliminiert Bindestriche und schreibt das folgende Zeichen in Großbuchstaben. Der Präfix data- entfällt ersatzlos. Aus data-system-path wird systemPath.

Data Attribute und CSS

Obwohl data-Attribute generell für den Benutzer nicht sichtbar sind, können Sie dem Benutzer durch etwas CSS bereitgestellt und mittels Attribut-Selektor gestylt werden:

.path::after {
   content: attr (data-user-path);
}

.path[data-user-path] { color: firebrick }
data-attribute selbstgestrickt