Bagaimana untuk Mengakses dan Menggunakan Atribut Data dalam JavaScript?

Mengakses Nilai Atribut Data dalam JavaScript

Dalam HTML, atribut data menyediakan cara untuk menyimpan maklumat tambahan tentang elemen tanpa menjejaskan visualnya pembentangan. Untuk mengakses atribut ini dalam kod JavaScript, anda perlu menggunakan sifat dataset.

Pertimbangkan elemen HTML berikut dengan pelbagai atribut data:

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

Untuk mendapatkan semula nilai atribut data ini dan gunakannya dalam kod JavaScript, anda akan menulis:

<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: "Luïs"
  });
});</code>

Harta set data mengembalikan objek yang mengandungi semua atribut data sesuatu elemen, dengan nama sifat adalah nama atribut asal dengan "data- " awalan dialih keluar. Dalam kod di atas, kami menggunakan objek ini untuk mengisi objek JSON yang kemudiannya boleh digunakan untuk pemprosesan selanjutnya atau dihantar ke pelayan.

Hasil kod ini ialah rentetan JSON yang mewakili objek:

<code class="json">{
  "id": 123,
  "subject": "topic",
  "points": -1,
  "user": "Luïs"
}</code>

Ini menunjukkan cara anda boleh menggunakan sifat set data untuk mengakses nilai atribut data dalam kod JavaScript, membolehkan anda mengekstrak dan memanipulasi maklumat ini dengan mudah untuk pelbagai tujuan.

Atas ialah kandungan terperinci Bagaimana untuk Mengakses dan Menggunakan Atribut Data dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!