HTML5 data-*

這是 HTML5 新加入的屬性,讓你可以自己定義要存放在 element 中的資料,而不需要干擾 class, id, type, name 這些屬性的設置

例如:

== 原本 ==

<button id="good-1" onclick="getId(this);">
<button id="good-2" onclick="getId(this);">

<script>
  function getId(good){
    var id = good.id.split('-')[1];
  }
</script>

== 改寫 ==

<button id="good-1" data-id="1" onclick="getId(this);">
<button id="good-2" data-id="2" onclick="getId(this);">

<script>
  function getId(good){
    // native js
    good.getAttribute('data-id');

    // jQeury
    good.attr('good-id');
    good.data('id')    
  }
</script>

同一個 element 的 data-* 會被存放在一個叫做 dataset 的 object 中,我們可以透過 JavaScript 呼叫 element 的 getAttribute() 來存取對應的資料內容:good.getAttribute('data-id'),也可以呼叫此 element 的 dataset:good.dataset

为什么我们要用 data-* 呢,一个最大的好处是我们可以把所有自定义属性在 dataset 对象中统一管理,遍历啊神马的都哦很方便,而不至于零零散散了,所以用用还是不错的。

Reference:

  1. http://muki.tw/tech/html5-jquery-access-data/
  2. https://www.renfei.org/blog/html5-introduction-2-data-attribute.html