Data Attribute

• zusätzliche Informationen an HTML Element anheften
• Attribut mit selbst definiertem Namen, der mit "data-" beginnt
  ⓘ

  Generell können in HTML beliebige eigene Attributnamen definiert werden. Da HTML weiter verändert wird, könnten diese in Zukunft mit Standardattributen kollidieren. Daher data Attribute verwenden.↩
• kann auch in CSS verwendet werden
• Zugriff in JavaScript über die Eigenschaft dataset (Achtung Bezeichner in HTML mit "-" separiert und in JavaScript CamelCase Schreibweise)

❮❯HTML<div id="1" data-article-nr="123" data-in-stock="true">Hose</div>
<div id="2" data-article-nr="456" data-in-stock="false">Hemd</div>

❮❯CSS[data-in-stock='false'] {
  text-decoration: line-through;
}

❮❯JavaScriptlet article = document.getElementById('1');
console.log(article.dataset.articleNr);
console.log(article.dataset.inStock);
article.dataset.inStock = 'false';