← HTML44 / 46

data-* : jembatan ke JavaScript

Butuh menyimpan data di elemen HTML untuk dipakai JavaScript? Jangan menumpangkannya ke class atau id. Pakai atribut data-* — nama bebas setelah data-, valid secara resmi, dan diakses lewat element.dataset. Contoh: data-product-id="42" menjadi el.dataset.productId.

👀 Contoh dulu

<button data-user-id="7" data-role="admin">Edit</button>

<!-- di JavaScript nanti: -->
<!-- el.dataset.userId  → "7"     -->
<!-- el.dataset.role    → "admin" -->

Hasilnya: Tombol tampil normal, tapi membawa data tersembunyi yang siap dibaca JavaScript.

💡 data-user-id (tanda hubung) menjadi dataset.userId (camelCase) di JavaScript — konversi otomatis.

📝 Sekarang giliranmu

Buat <button> bertuliskan Beli dengan atribut data-product-id bernilai 42 dan data-price bernilai 50000.

Preview

← Sebelumnya Berikutnya →