<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 = $("#example");
const output = $("#output");
// 取得 data-* 屬性值
const userId = div.data("user-id"); // kebab-case 也可讀取
const userId2 = div.data("userId");
const userName = div.data("userName");
const role = div.attr("data-role");
const info = div.data("info");
$("#output").html(`
使用者 ID: ${userId} <br>
使用者 ID 2: ${userId2} <br>
使用者名稱: ${userName} <br>
角色: ${role} <br>
額外資訊: 名字 - ${info.name}, 年齡 - ${info.age}
`);
This Pen doesn't use any external CSS resources.