我如何获得自定义数据属性

Question

我可以得到 id 的值，但是 data-id 显示这个错误，

Uncaught ReferenceError: id is not defined

我的代码，

<ul id="highscores"></ul>
<script>
var hst = document.getElementById("highscores");

var highScores = [
    { id: "1",name: "Maximillian", score: 1000 },
    { id: "2",name: "The second guy", score: 700 },
    { id: "3",name: "The newbie!", score: 50 }
];

function deleteById ( self ){
    console.log(self.id);
    console.log(self.data-id);
}
for (var i = 0; i < highScores.length; i++) {
        hst.innerHTML +=
        "<li >" +"<a data-id='test' id="+highScores[i].id + " href='#' onclick='deleteById(this)'>x</a>" +
        highScores[i].name +
        " -- " +
        highScores[i].score +
        "</li>";
    }
</script>

Answer 1

属性和属性是两个不同的东西。您定义的 data-id 属性不会自动关联到该元素上的属性。同样，例如<input type="text"> 可以有一个 value 属性，但是它上面的 value 属性不一定会给你那个属性的值，因为 value 属性指向输入中当前的内容，而 value 属性是其初始值。试着把这两个概念分开。

虽然要回答你的问题；有两种方法。一种是使用element.getAttribute('data-id')。这适用于任何属性。但是，data-* 属性有自己独特的方式来读取和写入它们的值； dataset 属性。例如，要访问 data-id 属性，您可以使用 element.dataset.id。同样，要访问 data-foo-bar 属性，您可以使用 element.dataset.fooBar.

TLDR：使用 element.dataset.id 或 element.getAttribute('data-id')

我如何获得自定义数据属性

How can i get custom data attribute

javascript

custom-data-attribute