はなぜ.getAttributeは、データ - のためにnullを返す*属性

Question

私はいくつかのHTMLを持っていると私は、このスクリプト

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

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

で「データ・nChargers」の値を取得しようとしているが、 nullを返します。私は間違って何をしていますか？

Answer 1

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

を介してアクセスすることができるdata-nChargersある代わり

getAttribute("data-nChargers");を試してみてください。

これは、getAttributeメソッドが正確な名前を検索するためです。データ属性を取得する場合は、代わりに.dataset.nChargersを使用してください。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes

敬具：中

詳しい情報。完全な属性名がdata-nChargers、単なるnChargersあるgetAttribute("nChargers");

Answer 3

あなたが変更する必要があります。 （すなわちn-chargers）へのキャメルケース

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

datasetは破線の言葉をdata-接頭辞を無視して、変換します。あなただけnChargersを使用したい場合は

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

は、あなたがdatasetプロパティを使用することができます（すなわち、nChargers）。

https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset

Answer 4

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

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

getAttribute("data-nChargers");に

Answer 5

近代的な方法は、datasetを使用しています。属性名は小文字になり、その後ハイフンは削除され、キャメルケースに変換されます。

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

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

Answer 6

getAttribute()機能は、属性の名前全体を使用する必要があります。この場合data-nchargers。

もう1つの方法は、datasetプロパティを使用することです。この場合は、接頭辞data-は必要ありません。

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