CSS, HTML und Javascript mit {stil}

data-attribute

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 nicht direkt an Benutzer, sondern an Anwendungen und Scripte und fügen dem HTML-Tag keine weiteren Merkmale hinzu. Sie liefern Informationen von und zu Content Management Systemen und befreien CSS-Klassen von zusätzlichen Informationen.

Die privaten Attribute lassen sich z.B. mit getAttribute lesen und mit setAttribute setzen und ändern.

data-Attribute beginnen grundsätzlich mit data-:

<li><a href="/normfarbtafel" data-system-path="node/12">Feng Shui</a></li>
<li><a href="/farbraum" data-system-path="node/28">Feng Shui</a></li>
<li><a href="/monitor-gamma" data-system-path="node/17">Feng Shui</a></li>

Hier liefert der Link neben der kanonischen URL den 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.

<section class="user-data" data-user="user123" data-user-path="node123">
var path = document.querySelector(".user-data");
path.dataset.user 
path.dataset.userPath

Direkter und einfach greift die dataset-Eigenschaft zu – wenn IE10 außer Acht gelassen werden kann.

var path = document.querySelectorAll("li");

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