为什么.getAttribute返回null用于数据*属性

问题描述：

我有一些HTML，我想用这个脚本来获取“数据nChargers”值为什么.getAttribute返回null用于数据*属性

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

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

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

属性不nChargers，它的'数据nChargers' – mhodges

你不能有字'is'在标题 – vsync

答

属性是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>

答

尝试

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

发生这种情况是因为getAttribute方法查找确切的名称。如果你想获得数据属性，你应该使用.dataset.nChargers。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

最好的问候：在

更多信息。

两次能否请你解释为什么，为今后的访客？ – mhodges

我也尝试过。仍然为空。 –

答

您需要更改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>

答

全属性名称data-nChargers，不是简单nChargers。

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

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

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

dataset忽略data-前缀和转换虚字（即n-chargers），以驼峰（即nChargers）。

答

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

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

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

答

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

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

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