为什么.getAttribute为data- * attribute

Question

我有一些HTML，我试图获得＆＃34; data-nChargers＆＃34;的价值。使用此脚本

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但它返回null。我做错了什么？

Answer 1

该属性为data-nChargers，可通过dataset或getAttribute("data-nChargers")

访问

＆＃13;

＆＃13;

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

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

console.log(e.dataset.nchargers);

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试

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

这是因为getAttribute方法查找该确切名称。如果您想获取数据属性，请改为使用.dataset.nChargers。

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

最好的问候。

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 4

完整的属性名称为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/getAttribute https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Answer 5

现代方式是使用dataset。请注意，属性名称是小写的，然后删除连字符并转换为驼峰大小写。

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

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

Answer 6

https://github.com/userA/mainrepo函数要求您使用属性的全名。在这种情况下getAttribute()。

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

data-