如何在 DOM 中设置一个 JSON 文字的属性值

Question

我正在尝试在标签中包含的 JSON 文字中设置键值的值，例如，在数据信息下方的代码段中是 JSON 文字.

<video
  id="myPlayer_1"
  width="90%"
  poster="videos/posters/NoVideoPoster.png"
  data-info="{"start_time": "71522", "end_time":"71622", next_video:"0"}">
</video>

现在我可以使用以下代码读取属性：

var ar = JSON.parse(videoElement.getAttribute("data-info"))
console.log("next video" + ar.next-_video);

但事实证明设置它很困难，例如：

videoElement.setAttribute("data-info.next_video", "1");

产生：

<video
  id="myPlayer_1"
  width="90%"
  poster="videos/posters/NoVideoPoster.png"
  data-info="{"start_time": "71522", "end_time":"71622",next_video: "0"}"
  data-info.next_video = "1">
</video>

这显然是不正确的。有人可以帮忙吗？

Answer 1

您必须设置 whole 属性。对于 DOM，请记住，它只是一个字符串。

例如，在阅读并解析之后：

var ar = JSON.parse(videoElement.getAttribute("data-info"))

您可以更新它并通过转换回 JSON（字符串）再次设置它：

ar["next-video"] = 1;
videoElement.setAttribute("data-info", JSON.stringify(ar));

如果您控制元素并且只需要更新部分信息，您可以考虑单独的 data-* 属性，而不是包含 JSON 的单个属性。例如：

<video
    id="myPlayer_1"
    width="90%"
    poster="videos/posters/NoVideoPoster.png"
    data-start-time=71522
    data-end-time=71622
    data-next-video=0
></video>

那么更新“下一个视频”是：

videoElement.dataset.nextVideo = "1";

请注意 dataset 如何将 data-next-video 转换为 nextVideo。查看详情on MDN.

Answer 2

而不是

videoElement.setAttribute("data-info.next_video", "1");

你应该这样做

var ar = JSON.parse(videoElement.getAttribute("data-info"))
ar.next_video = "1";
videoElement.setAttribute("data-info", JSON.stringify(ar));

如何在 DOM 中设置一个 JSON 文字的属性值

How do you set an attribute value that is a JSON literal within a DOM

javascript

json

dom