【HTML】HTML5 中的 data 屬性


Posted by Jianna on 2021-11-17

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

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

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

透過 JS 調用

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

透過 jQuery 調用

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

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

透過 CSS 調用

[data-id="item1"]{}

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

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

參考資料


#data attribute







Related Posts

曼陀號領航計畫(1) 報名到錄取

曼陀號領航計畫(1) 報名到錄取

HTML訓導處|在iOS Safari中更改勾選字符的顏色

HTML訓導處|在iOS Safari中更改勾選字符的顏色

筆記-JavaScript-event loop

筆記-JavaScript-event loop


Comments