Change div content in HTML5 Custom Data Attributes

Question

I declare a following div in file1.html to draw a nice gauge. The div uses some HTML5 Custom Data Attributes as follow:

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

Now in Javascript, how do I recall the div and set new number for the "value" attribute and "threshold" attribute? Thanks

Harshana · Accepted Answer · 2020-11-21 01:33:04Z

1

You can use following functions to fulfill your task:

element.getAttribute to get the values inside the attribute
element.setAttribute to set the values inside the attribute
JSON.stringify and JSON.parse to work with JSON

Check the code below.

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>

answered Nov 21, 2020 at 1:33

Harshana

5,5561 gold badge22 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

onlit · Accepted Answer · 2020-11-21 01:32:02Z

1

You can use document.querySelector with 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>

answered Nov 21, 2020 at 1:32

onlit

7786 silver badges19 bronze badges

Collectives™ on Stack Overflow

Change div content in HTML5 Custom Data Attributes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related