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