Bagaimana untuk Mengakses dan Menggunakan Nilai Atribut Data dalam JavaScript?

Mendapatkan Nilai Atribut Data dalam JavaScript

Dalam HTML, atribut data membolehkan anda menyimpan data dalam elemen tanpa menjejaskan gaya atau kandungannya. Apabila bekerja dengan JavaScript, anda mungkin mahu mengakses dan menggunakan nilai atribut ini.

Pertimbangkan penanda HTML berikut:

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

Sekarang, katakan anda perlu menangkap atribut data yang bermula dengan "data-" dan mengekstrak perwakilan JSON bagi nilai tertentu. Pada mulanya, anda mungkin menghadapi nilai nol atau ralat apabila mencuba ini:

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

Untuk menyelesaikannya, anda mesti mengakses sifat set data, yang menyediakan koleksi seperti peta bagi semua atribut data. Kod JavaScript yang diperbetulkan ialah:

<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>

Ini akan berjaya menangkap nilai yang dikehendaki:

{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

Dengan menggunakan sifat set data, anda boleh mengakses dan memanipulasi atribut data dalam JavaScript dengan mudah, membolehkan lebih banyak kawalan dan fleksibiliti dalam kod anda.

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