已解決430363個問題，去搜搜看，總會有你想問的

更改 HTML5 自定義數據屬性中的 div 內容

首頁猿問更改 HTML5...

更改 HTML5 自定義數據屬性中的 div 內容

JavaScript

LEATH 2023-08-18 16:14:17

我在 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”屬性設置新數字？謝謝

查看完整描述

2 回答

www說

TA貢獻1775條經驗獲得超8個贊

您可以使用以下功能來完成您的任務：

element.getAttribute獲取屬性內的值
element.setAttribute設置屬性內的值
JSON.stringify并JSON.parse使用 JSON

檢查下面的代碼。

var meter1 = document.getElementById("meter1")

var dataSettings = JSON.parse(meter1.getAttribute("data-settings"))

dataSettings.value = 8

dataSettings.min = 5

meter1.setAttribute("data-settings", JSON.stringify(dataSettings))

console.log(meter1.getAttribute("data-settings"))

<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>

反對回復 2023-08-18

楊魅力

TA貢獻1811條經驗獲得超6個贊

您可以document.querySelector使用JSON.parse

const gauge = document.querySelector('#meter1');

console.log(JSON.parse(gauge.dataset.settings).threshold)

<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>

反對回復 2023-08-18

2 回答
0 關注
160 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

更改 HTML5 自定義數據屬性中的 div 內容

更改 HTML5 自定義數據屬性中的 div 內容

2 回答

添加回答