dapatkan atribut data dalam kode JavaScript

Saya memiliki html berikutnya:

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

Apakah mungkin untuk mendapatkan atribut yang diawali dengan data-, dan menggunakannya dalam kode JavaScript seperti kode di bawah ini? Untuk saat ini saya mendapatkan nullhasilnya.

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"
    });
});

Anda perlu mengakses datasetproperti :

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"
  });
});

Hasil:

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

Karena datasetproperti tidak didukung oleh Internet Explorer hingga versi 11, Anda mungkin ingin menggunakan getAttribute():

document.getElementById("the-span").addEventListener("click", function(){
  console.log(this.getAttribute('data-type'));
});

Dokumentasi kumpulan data

dokumentasi getAttribute

Anda dapat mengaksesnya sebagai

element.dataset.points

dll. Jadi dalam hal ini: this.dataset.points

Anda juga bisa mengambil atribut dengan metode getAttribute () yang akan mengembalikan nilai atribut HTML tertentu.

var elem = document.getElementById('the-span');

var typeId = elem.getAttribute('data-typeId');
var type   = elem.getAttribute('data-type');
var points = elem.getAttribute('data-points');
var important = elem.getAttribute('data-important');

console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`
);

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

jika Anda menargetkan atribut data dalam elemen Html,

document.dataset tidak akan bekerja

kamu harus menggunakan

document.querySelector("html").dataset.pbUserId

atau

document.getElementsByTagName("html")[0].dataset.pbUserId

Browser modern menerima HTML dan SVG DOMnode.dataset

Menggunakan properti set data node DOM Javascript murni .

Ini adalah standar Javascript lama untuk elemen HTML (sejak Chorme 8 dan Firefox 6) tetapi baru untuk SVG (sejak tahun 2017 dengan Chorme 55.x dan Firefox 51) ... Ini bukan masalah untuk SVG karena saat ini (2019) pangsa penggunaan versi ini didominasi oleh browser modern.

Nilai nilai kunci set data adalah string murni, tetapi praktik yang baik adalah mengadopsi format string JSON untuk tipe data non-string, untuk menguraikannya JSON.parse().

Menggunakan properti set data dalam konteks apa pun

Cuplikan kode untuk mendapatkan dan menyetel set data nilai kunci pada konteks HTML dan SVG.

console.log("-- GET values --")
var x = document.getElementById('html_example').dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)

var y = document.getElementById('g1').dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)

console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( document.getElementById('svg_example').innerHTML )

<p id="html_example" data-list="[1,2,3]" data-s="Hello123">Hello!</p>
<svg id="svg_example">
  <g id="g1" data-list="[4,5,6]" data-s="Hello456 SVG"></g>
</svg>

Sekitar tahun 2019, dengan menggunakan jquery, ini dapat diakses menggunakan $('#DOMId').data('typeId')where $('#DOMId')jquery selector untuk elemen span Anda.

Coba ini alih-alih kode Anda:

var type=$("#the-span").attr("data-type");
alert(type);