【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

CoderBridge x TechBridge 技術文章推廣計畫

CoderBridge x TechBridge 技術文章推廣計畫

W11_資訊安全_XSS, SQL Injection, CSRF 及後端驗證_學習筆記整理

W11_資訊安全_XSS, SQL Injection, CSRF 及後端驗證_學習筆記整理

 JQ總務處|處理JSON資料|深入淺出jQuery

JQ總務處|處理JSON資料|深入淺出jQuery


Comments