为什么 .getAttribute 为 data-\* 属性返回 null

Question

我有一些 HTML，我正在尝试使用此脚本获取“data-nChargers”的值

 var noOfChargers = document.getElementById("chargers-list")
                   .getAttribute("nChargers");
console.log(noOfChargers);

 <div id="chargers-list" data-nChargers="4"></div>

但它返回空值。我究竟做错了什么？

原文由 Peter Gostling 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

该属性是 data-nChargers 可以通过 dataset 或 getAttribute("data-nChargers") 访问

 var e = document.getElementById("chargers-list");

console.log(e.getAttribute("data-nChargers"));

console.log(e.dataset.nchargers);

 <div id="chargers-list" data-nChargers="4"></div>

原文由 Adam Azad 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试

getAttribute("data-nChargers"); 代替。

发生这种情况是因为 getAttribute 方法查找该确切名称。如果你想获得数据属性，你应该使用 .dataset.nChargers 代替。

更多信息： https ://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

此致。

原文由 Wilson López 发布，翻译遵循 CC BY-SA 3.0 许可协议