javascript - 如果数据集名称具有多个破折号，如何使用javascript设置div数据属性？

我需要使用javascript更新div层的数据集。如果数据集有一个破折号，例如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';

有任何想法吗？

谢谢

最佳答案

您也可以使用theDiv.dataset.myvarList，破折号被驼峰式大小写代替。



您可以在这里了解更多信息-> source - MDN

查看以下代码段

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

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