我如何獲得自定義數據屬性

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