Javascript 更改HTML5自定义数据属性中的div内容

我在file1.html中声明了下面的div，以绘制一个漂亮的标尺。div使用一些HTML5自定义数据属性，如下所示：

<div class="gauge" id="meter1" data-settings='
   {"value": 7,
    "min": 0,
    "max": 50,
    "threshold": [
      {"from": 25, "to": 50, "color": "blue", "label": "Warning"},
      {"from": 0, "to": 25, "color": "orange", "label": "Critical"}
        ]
    }'></div>

---

现在在Javascript中，如何调用div并为“value”属性和“threshold”属性设置新的数字？谢谢

您可以将

document.querySelector

与

JSON.parse一起使用


const gauge=document.querySelector（'#meter1'）；
console.log（JSON.parse（gauge.dataset.settings）.threshold）
您可以将
document.querySelector
与
JSON.parse一起使用


const gauge=document.querySelector（'#meter1'）；
console.log（JSON.parse（gauge.dataset.settings）.threshold）
您可以使用以下功能来完成任务：


element.getAttribute
获取属性中的值
element.setAttribute
设置属性内的值
JSON.stringify
和
JSON.parse
使用JSON

检查下面的代码


var meter1=document.getElementById（“meter1”）
var dataSettings=JSON.parse（meter1.getAttribute（“数据设置”））
dataSettings.value=8
dataSettings.min=5
meter1.setAttribute（“数据设置”，JSON.stringify（数据设置））
console.log（meter1.getAttribute（“数据设置”））
您可以使用以下功能来完成任务：


element.getAttribute
获取属性中的值
element.setAttribute
设置属性内的值
JSON.stringify
和
JSON.parse
使用JSON

检查下面的代码


var meter1=document.getElementById（“meter1”）
var dataSettings=JSON.parse（meter1.getAttribute（“数据设置”））
dataSettings.value=8
dataSettings.min=5
meter1.setAttribute（“数据设置”，JSON.stringify（数据设置））
console.log（meter1.getAttribute（“数据设置”））