Блог

Главная - Вопросы по программированию - Изменение содержимого div в пользовательских атрибутах данных HTML5

Изменение содержимого div в пользовательских атрибутах данных HTML5

#javascript #html

#javascript #HTML

Вопрос:

Я объявляю следующий div в file1.html чтобы нарисовать хороший калибр. 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»? Спасибо

Ответ №1:

Для выполнения своей задачи вы можете использовать следующие функции:

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

Ответ №2:

Вы можете использовать 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>
Метки: