So greifen Sie auf Datenattribute zu und rendern sie mit CSS und JavaScript

Datenattribute geben uns die Möglichkeit, benutzerdefinierte Datenattribute in HTML einzubetten. Laut MDN ermöglichen uns Datenattribute, zusätzliche Informationen zu standardmäßigen semantischen HTML-Elementen ohne andere Hacks wie nicht standardmäßige Attribute oder zusätzliche Eigenschaften in DOM zu speichern.

Das Schöne an diesen Datenattributen ist, dass auf sie in CSS und JavaScript zugegriffen werden kann. Sehen wir uns zuerst ein Beispiel an, wie es mit CSS funktioniert:

<b data-content="John Doe"></b>
<style type="text/css">
  b::after{
       content: attr(data-content);
  }
</style>

Außerdem kann JavaScript verwendet werden, um auf Datenattribute auf der Webseite zuzugreifen und diese wiederzugeben. Sehen wir uns unten ein Beispiel an:

var name = b.document.getElementById("name");

console.log(name.dataset.parent);

Bemerkenswerte Referenzen