lấy các thuộc tính dữ liệu trong mã JavaScript

Tôi có html tiếp theo:

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

Có thể lấy các thuộc tính bắt đầu bằng data-và sử dụng nó trong mã JavaScript như mã bên dưới không? Để bây giờ tôi nhận được nullkết quả.

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

Bạn cần truy cập vào datasettài sản :

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

Kết quả:

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

Vì thuộc datasettính không được Internet Explorer hỗ trợ cho đến phiên bản 11, nên bạn có thể muốn sử dụng getAttribute()thay thế:

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

Tài liệu dữ liệu

tài liệu getAttribution

Bạn có thể truy cập nó như

element.dataset.points

vv Vì vậy, trong trường hợp này: this.dataset.points

Bạn cũng có thể lấy các thuộc tính bằng phương thức getAttribution () sẽ trả về giá trị của một thuộc tính HTML cụ thể.

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>

nếu bạn đang nhắm mục tiêu thuộc tính dữ liệu trong phần tử Html,

document.dataset sẽ không làm việc

bạn nên sử dụng

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

hoặc là

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

Các trình duyệt hiện đại chấp nhận HTML và SVG DOMnode.dataset

Sử dụng thuộc tính bộ dữ liệu nút DOM của Javascript thuần túy .

Đó là một tiêu chuẩn Javascript cũ cho các thành phần HTML (kể từ Chorme 8 và Firefox 6) nhưng mới cho SVG (kể từ năm 2017 với Chorme 55.x và Firefox 51) ... Đây không phải là vấn đề đối với SVG vì hiện tại (2019) chia sẻ sử dụng của phiên bản bị chi phối bởi các trình duyệt hiện đại.

Các giá trị của khóa-giá trị của tập dữ liệu là các chuỗi thuần túy, nhưng một thực tế tốt là áp dụng định dạng chuỗi JSON cho các kiểu dữ liệu không phải chuỗi, để phân tích cú pháp theo JSON.parse().

Sử dụng thuộc tính dữ liệu trong bất kỳ bối cảnh nào

Đoạn mã để nhận và đặt bộ dữ liệu khóa-giá trị ở bối cảnh HTML và 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>

Circa 2019, sử dụng jquery, điều này có thể được truy cập bằng $('#DOMId').data('typeId')nơi $('#DOMId')là selector jquery cho phần tử span của bạn.

Hãy thử điều này thay vì mã của bạn:

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