【HTML】HTML5 中的 data 屬性

當需要處理一些不敏感的物件資料時，我們可以在 DOM 上（可以這麼說嗎？DOM 上？）自訂資料屬性 data-*，並把資料儲存於該屬性中。

<div class="group-item" data-id="item1"></div>

此文主要是紀錄一下取出資料的方法，以免我金魚腦發作。

dataset.自訂屬性名

element.getAttribute("data-id");
element.setAttribute("data-id", "123"); // 當然也可以賦值

element.dataset.id;
element.dataset.id = "123";

也可以塞 JSON 格式

<ul>
  <li data-person='
    {
      "name": "Chris Coyier",
      "job": "Web Person"
    }
  '></li>
</ul>

取用時記得轉格式

let json = el.dataset.person;
let data = JSON.parse(json);

console.log(data.name); // Chris Coyier
console.log(data.job); // Web Person

$(item).data(自訂屬性名)

var a = $('#myElementID').data('myvalue'); //get myvalue
$('#myElementID').data('myvalue',38); //set myvalue

[data-id="item1"]{}

div[data-id="item1"]{}

div::before{
  content: attr(data-id);
}

參考資料