第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

更改 HTML5 自定義數(shù)據(jù)屬性中的 div 內(nèi)容

更改 HTML5 自定義數(shù)據(jù)屬性中的 div 內(nèi)容

LEATH 2023-08-18 16:14:17
我在 file1.html 中聲明了以下 div 來繪制一個漂亮的儀表。div 使用一些 HTML5 自定義數(shù)據(jù)屬性,如下所示:<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>現(xiàn)在在 Javascript 中,如何調(diào)用 div 并為“value”屬性和“threshold”屬性設(shè)置新數(shù)字?謝謝
查看完整描述

2 回答

?
www說

TA貢獻(xiàn)1775條經(jīng)驗 獲得超8個贊

您可以使用以下功能來完成您的任務(wù):

  • element.getAttribute獲取屬性內(nèi)的值

  • element.setAttribute設(shè)置屬性內(nèi)的值

  • JSON.stringifyJSON.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>


查看完整回答
反對 回復(fù) 2023-08-18
?
楊魅力

TA貢獻(xiàn)1811條經(jīng)驗 獲得超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>


查看完整回答
反對 回復(fù) 2023-08-18
  • 2 回答
  • 0 關(guān)注
  • 169 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號