Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimanakah anda mengakses atribut data dalam elemen JavaScript?

Bagaimanakah anda mengakses atribut data dalam elemen JavaScript?

Barbara Streisand
Barbara Streisandasal
2024-10-27 08:38:31116semak imbas

How do you access data attributes in JavaScript elements?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn