Come accedere e rendere gli attributi dei dati con CSS e JavaScript

Gli attributi dei dati ci danno la possibilità di incorporare attributi di dati personalizzati in HTML. Secondo MDN , gli attributi dei dati ci consentono di memorizzare informazioni extra su elementi HTML semantici standard senza altri hack come attributi non standard o proprietà extra su DOM.

La bellezza di questi attributi di dati è che è possibile accedervi in ​​​​CSS e JavaScript. Vediamo prima un esempio di come funziona con i CSS:

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

Inoltre, JavaScript può essere utilizzato per accedere e visualizzare gli attributi dei dati sulla pagina web. Vediamo un esempio qui sotto:

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

console.log(name.dataset.parent);

Riferimenti notevoli