使用JavaScript获取HTML DOM上数据集中第一个对象的值

Question

所以我有一个这样的DOM：

<div data-info="{"partnerLink":"https://bing.com","fillColor":"rgba(10,91,144,1)"}"></div>

有什么方法可以在JS中获得partnerLink的值（在本例中为https://bing.com ）？

我知道最好有data-partnerLink和data-fillColor，但这是我现在所拥有的。

Answer 1

修复对象。 您使用的引号是错误的。 使用querySelector访问元素，并使用getAttribute获取属性。 使用点表示法打印对象属性

 var a=document.querySelector('div') var b=a.getAttribute('data-info'); console.log(JSON.parse(b).partnerLink) 

 <div data-info='{"partnerLink":"https://bing.com","fillColor":"rgba(10,91,144,1)"}'></div> 

Answer 2

首先，您需要像这样修改报价：

<div data-info='{"partnerLink":"https://bing.com","fillColor":"rgba(10,91,144,1)"}'></div>

（我所做的只是将第一个和最后一个""改成''因此不会干扰内部引号）。

您可以这样做：

 var div = document.querySelector("div"); //Add an ID and use getElementById if there's more than one div var partnerLink = JSON.parse(div.getAttribute("data-info")).partnerLink; console.log(partnerLink); 

 <div data-info='{"partnerLink":"https://bing.com","fillColor":"rgba(10,91,144,1)"}'></div>