Bagaimanakah anda mengakses atribut data dalam elemen JavaScript?

Mendapatkan Atribut Data dalam JavaScript

Apabila berurusan dengan elemen HTML yang mempunyai atribut data, seperti jenis data atau titik data, mengakses nilai mereka dalam JavaScript boleh menjadi satu cabaran. Mari terokai cara untuk mendapatkan semula atribut data ini dalam kod JavaScript.

Mengakses Atribut Data Menggunakan set data

Sifat set data membolehkan anda mengakses semua atribut data unsur yang namanya mulakan dengan "data-". Untuk mendapatkan nilai atribut data tertentu, hanya gunakan nama sifat tanpa awalan "data-". Sebagai contoh, untuk mendapatkan nilai atribut jenis data, anda akan menggunakan this.dataset.type.

Contoh Penggunaan

Pertimbangkan elemen HTML berikut:

<code class="html"><span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span></code>

Apabila peristiwa berlaku pada elemen ini, anda boleh mengakses atribut datanya dalam fungsi pengendali acara:

<code class="javascript">document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "H. Pauwelyn"
  });
});</code>

Hasil

Pembolehubah json kini akan mengandungi objek dengan nilai atribut data:

<code class="json">{"id": 123, "subject": "topic", "points": -1, "user": "H. Pauwelyn"}</code>

Atas ialah kandungan terperinci Bagaimanakah anda mengakses atribut data dalam elemen JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!