データセット名に複数のダッシュが含まれている場合、divデータ属性をjavascriptで設定するにはどうすればよいですか？

Question

divレイヤのデータセットをjavascriptで更新する必要があります。データセットにダッシュが1つある場合、以下のコードが動作しています。 data-myvar ...

<div id="myDiv" data-myvar="10"> 

var theDiv = document.getElementById("myDiv"); 
theDiv.className = 'newClass'; 
theDiv.dataset.myvar = '20'; 
theDiv.appendChild(content); 

<div id="myDiv" data-myvar="20" class="newClass"> 

は素晴らしい作品が、私は、このようなdata-myvar-listなどのデータセットを持っている場合、それは動作しません結果を提供します。私は例

theDiv.dataset.myvar.list = '20'; 

のために試してみましたそして、これはどのシンテックスエラー

theDiv.dataset.myvar-list = '20'; 

任意のアイデアを与えますか？

おかげ

Answer 1

利用のsetAttribute（）これを実現するための機能：

theDiv.setAttribute('data-myvar-list','20'); 

ていますが、より良いダッシュを使用しないで考えると、単にデータセット（）

データセットがあると行くかもしれませんデータ属性を含む要素のネイティブプロパティ。新しい（ish）追加であり、IE11 +、Chrome 8+、FF 6+などでのみサポートされています。

は、このJsPerf

https://jsperf.com/html5-dataset-vs-native-setattribute

によるのsetAttribute（）メソッドは、約25％、実際に高速です。

Answer 2

theDiv.dataset.myvarListも使用できます。ダッシュはキャメルケースに置き換えられます。キャメルケースに

ダッシュスタイル：カスタムデータ属性名は、接頭辞DATA-が（ダッシュを含む）が除去され

• 以下のルールでDOMStringMapエントリのキーに変換されます。
• ダッシュ（U + 002D）とそれに続くASCII小文字a〜zの場合、ダッシュは削除され、文字は大文字の対応に変換されます。
• 他の文字（その他のダッシュを含む）は変更されません。

あなたはここでそれについての詳細を読むことができます - >source - MDN

次のスニペットをチェック

var theDiv = document.getElementById("myDiv"); 
 
theDiv.className = 'newClass'; 
 
console.log(theDiv.dataset.myvarList);

<div id="myDiv" data-myvar-list="20" class="newClass">