CSS, HTML und Javascript mit {stil}

Javascript data-attribute / dataset

Data Attribute: 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-Element und der Darstellung keine weiteren Merkmale hinzu.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Eigene Attribute in HTML-Tags

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 können in jedes HTML-Element gesetzt werden und beginnen grundsätzlich mit data-:

HTML
<section data-section-key="17" data-title="Private Attribute">…</section> 
<section data-section-key="18" data-title="dataset">…</section> 
<section data-section-key="22" data-title="CSS">…</section>
Script
let section = document.querySelectorAll("section");
for (item of section) {
	console.log (item.getAttribute("data-title"));
}

[Log] Private Attribute
[Log] dataset 
[Log] CSS

Neben dem data-*-Präfix darf das data-Attribut nur Buchstaben, Ziffern, Bindestrich, Punkt, Doppelpunkt und Underscore enthalten, aber keine Großbuchstaben.

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

dataset statt getAttribute

Direkter und einfacher als elem.getAttribute greift die Eigenschaft dataset. Alle modernen Browser, IE ab Version 11.

let section = document.querySelectorAll("section");
for (item of section) {
	console.log (item.dataset.sectionKey)
}

Wenn das Data-Attribut mit Bindestrichen geschrieben ist (so wie hier data-section-key), 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-key wird systemKey.

dot 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:

section[data-section-key="22"] h2 { 
	border-bottom: 2px solid orange;
}

Am Rande: Die Werte eines data-Attributs sind immer Strings, auch wenn im Beispiel hier eine Zahl notiert ist und muss mit parseInt bzw parseFloat interpretiert werden, um als Zahl zu gelten.

Event Listener

Genauso wie reguläre Attribute steht ein data-Attribut für EventListener zur Verfügung. 

let button = document.querySelector ("button[data-button-key='20']");
button.addEventListener ("click", function () {
	console.log (this.dataset.buttonKey)
})

Array oder Object als data-Attribut?

Auch wenn Data-Attribute nur Strings enthalten dürfen, können wir Arrays im Dataset speichern. So wie parseInt und parseFloat den Wert des datasets als Zahl interpretieren, wandelt JSON.parse() den String in ein Array um.

Wichtig ist nicht nur, dass die Array-Werte in eckige Klammern gesetzt werden, sondern auch in doppelte Hochkommas. So will JSON das ….

<div id="arr" data-array='["Hund", "Katze", "Maus"]'></div>

const arr = document.querySelector("#arr");
const realArr = JSON.parse(arr.dataset.array);
console.log ("Array?", Array.isArray(realArr)); // Array? true
console.log ("realArr", realArr);      // realArr ["Hund", "Katze", "Maus"]

Mit demselben Verfahren liest JSON.parse ein data-Attribut als Objekt ein.

<div id="dog" data-dogs='{"rasse":"Foxterrier", "name":"Freddy", "farbe":"schwarzweiß"}'></div>

const dogs = JSON.parse (document.querySelector("#dog").dataset.dogs);
console.log (dogs.rasse) // Foxterrier