Cara Mengakses Dan Merender Atribut Data Dengan CSS & JavaScript

Atribut data memberi kita kemampuan untuk menyematkan atribut data khusus dalam HTML. Menurut MDN , atribut data memungkinkan kita untuk menyimpan informasi tambahan pada elemen HTML semantik standar tanpa peretasan lain seperti atribut non-standar, atau properti tambahan pada DOM.

Keindahan atribut data ini adalah dapat diakses di CSS dan JavaScript. Mari kita lihat contoh cara kerjanya dengan CSS terlebih dahulu:

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

Selain itu, JavaScript dapat digunakan untuk mengakses dan merender atribut data di halaman web. Mari kita lihat contoh di bawah ini:

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

console.log(name.dataset.parent);

Referensi Terkemuka