<div id="example" data-user-id="12345" data-User-Name="Alice" data-role="admin" data-info='{"name": "Alice", "age": 25}'>
</div>
<p id="output"></p>
xxxxxxxxxx
const div = document.getElementById("example");
const output = document.getElementById("output");
// 取得 data-* 屬性值
const userId = div.dataset.userId;
const userName = div.dataset.userName;
const role = div.dataset.role;
const info = JSON.parse(div.dataset.info); // 解析 JSON 字串
output.innerHTML = `
使用者 ID: ${userId} <br>
使用者名稱: ${userName} <br>
角色: ${role} <br>
額外資訊: 名字 - ${info.name}, 年齡 - ${info.age}
`;
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.