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

Question

我有一些html，我正在尝试使用此脚本获得" data-nchargers"的价值

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

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

，但它返回零。我在做什么错？

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>

Answer 2

尝试

getAttribute("data-nChargers");而不是。

这是因为getAttribute方法寻找确切的名称。如果要获得数据属性，则应使用.dataset.nChargers。

更多信息：https://developer.mozilla.org/en-us/docs/web/guide/html/using_data_attributes

最好的问候。

Answer 3

完整属性名称是 data-nChargers，而不仅仅是 nChargers。

document.getElementById("chargers-list").getAttribute('data-nChargers')

如果您只想使用nChargers，则可以使用dataset属性：

document.getElementById("chargers-list").dataset.nChargers

dataset忽略data-前缀，然后将虚假的单词（即n-chargers）转换为骆驼案例（即nChargers）。

https://developer.mozilla.org/en-us/docs/web/api/element/getattributehttps://developer.mozilla.org/en-us/docs/web/api/htmlelement/dataset

Answer 4

现代方法是使用dataset。请注意，属性名称被低估，然后将连字符删除并转换为骆驼盒。

console.log(document.getElementById("chargers-list").dataset.nchargers);

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

Answer 5

getAttribute()功能要求您使用属性的全名。在这种情况下，data-nchargers。

另一个选项是使用dataset属性。在这种情况下，它不需要data-前缀。

var list = document.getElementById("chargers-list");
var noOfChargers = list.dataset.nchargers;
console.log(noOfChargers);

Answer 6

您需要将getAttribute("nChargers");更改为getAttribute("data-nChargers");

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

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