h5的data屬性傳json

HTML5的data屬性是DOM元素上的一個自定義屬性，用于存儲與該元素相關的數據。通常情況下，我們使用這個屬性存儲簡單的字符串或者數字型的數據，但它其實也可以被用來存儲json數據。

在這里，我們可以利用pre標簽來存儲json數據。

<div id="myData" data-json='{
"name": "John",
"age": 33,
"sex": "male",
"interests": ["reading", "swimming", "jogging"],
"address": {
"city": "New York",
"state": "NY",
"zip": "10001"
}
}'></div>

在上面的代碼中，我們定義了一個id為“myData”的div元素，并在里面通過data-json屬性來存儲JSON數據。JSON對象包含了不同類型的屬性，包括簡單的字符串和數字，數組和對象。

在使用JavaScript來提取數據時，我們可以通過setAttribute方法來獲取div元素的data-json屬性的值并用JSON.parse()來轉化JSON數據為JavaScript對象：

var myData = document.getElementById('myData');
var data = JSON.parse(myData.getAttribute('data-json'));

現在，我們可以使用data對象。比如，可以使用以下代碼為myData添加姓名：

myData.innerHTML = "My name is " + data.name;

以上就是使用h5的data屬性傳json的簡單介紹，希望對你有所幫助！