Atribut data-* adalah atribut buatan kamu sendiri buat nempelin info tambahan ke elemen HTML. Namanya bebas, asal diawali data-, misalnya data-color atau data-user-id. Browser gak menampilkan info ini di halaman. Yang membaca dan memakainya adalah CSS dan JavaScript kamu.
🧪 Tebakan cepat: kalau kamu tulis
data-price="150000"di sebuah<div>, angka 150000 muncul di halaman gak? Tebak dulu, jawabannya ada di bagian "Nempelin info ke elemen".
Nempelin info ke elemen
Ini kartu anggota dengan tiga atribut data:
<div class="kartu" data-color="biru" data-active="true" data-user-id="42">
Budi
</div>
<div class="kartu" ...>adalah tag pembuka. Semua atribut ditulis di sini, sesudah nama tag, dipisah spasi. Atribut itu info tambahan buat tag, bentuknyanama="nilai".data-color="biru"adalah atribut data: namanyadata-color, nilainyabiru. Bagian sesudahdata-kamu karang sendiri, pakai huruf kecil.data-active="true"dandata-user-id="42"adalah dua atribut data lagi. Satu elemen boleh bawa banyak sekaligus. Nama yang terdiri dari beberapa kata dipisah tanda minus.Budiadalah teks yang tampil, ditulis di antara tag pembuka dan tag penutup</div>.
Hasilnya, di halaman cuma kelihatan tulisan "Budi". Nilai biru, true dan 42 gak tampil, tapi tetap nempel di elemen itu.
Atribut data bisa dipasang di tag apa aja, termasuk tombol. Ingat, teks tombol bukan atribut. Teksnya tetap ditulis di antara tag pembuka dan penutup:
<button data-action="hapus" data-id="7">Hapus</button>
Kenapa harus diawali data-? Atribut karangan tanpa awalan, misalnya warna="biru", gak valid dan bisa bentrok dengan atribut resmi yang nanti ditambahkan ke HTML. Awalan data- memang disediakan buat info milik kamu sendiri.
Membaca dari JavaScript lewat dataset
const kartu = document.querySelector(".kartu");
kartu.dataset.color; // "biru"
kartu.dataset.userId; // "42"
datasetberisi semua atribut data milik elemen itu, ditulis tanpa awalandata-. Jadidata-colordibaca lewatdataset.color.- Nama dengan tanda minus berubah jadi camelCase: minusnya dibuang, huruf sesudahnya jadi kapital.
data-user-idjadidataset.userId. - Nilainya selalu teks (string), walaupun isinya angka. Butuh angka? Ubah dulu pakai
Number(kartu.dataset.userId).
Dipakai CSS buat milih elemen
[data-color="biru"] { background: lightblue; }
Kurung siku artinya "pilih elemen yang atribut ini nilainya segini". Ganti data-color="biru" di HTML jadi "hijau", dan aturan CSS buat hijau yang dipakai. Gak perlu bikin class baru.
⚠️ Jebakan yang sering ketemu
- Teks ditulis jadi atribut.
<button simpan>bikin tombol tanpa tulisan. Teksnya masuk di antara tag:<button ...>Simpan</button>. - Huruf kapital di nama. Browser mengubah
data-userIdjadidata-userid, jadidataset.userIdgak ketemu. Tulisdata-user-id. - Info rahasia. Siapa aja bisa lihat atribut data lewat view-source. Jangan taruh password atau token di sini.
- Lupa nilainya string.
kartu.dataset.active === trueselalu salah. Bandingkan dengan teks:=== "true".
TL;DR: Atribut data-* nempelin info ke elemen tanpa tampil di halaman. Tulis di tag pembuka, nama huruf kecil sesudah data-, nilai dalam tanda kutip. Satu elemen boleh punya banyak. JavaScript membacanya lewat dataset, dengan nama camelCase (data-user-id jadi dataset.userId), dan nilainya selalu string. CSS memilihnya dengan [data-color="biru"].
