2017年1月20日

[技術分享] 什麼是 HTML 5 中的資料屬性（data-* attribute）

      , , ,  
img
在接觸 HTML5 一段時間，認識大部分的屬性名稱像是 src, img, type, ... 後，一定會看到像是 data-item, data-key, data-...這類的屬性名稱，但是如果你直接去 google "data-item" 或 "data-key" 你可能又查不到這個屬性，到底這是哪種屬性呢？又可以如何應用呢？

HTML5 中的 data-* attribute 屬性

之所以會有 data-* attribute 的出現，是因為在製作網頁的過程中，我們常常會添加一些自己需要用到的屬性名稱，以方便自己容易理解，但總不能每個人在自己的網頁裡面都定義自己的屬性名稱，於是為了要避免大家在 HTML 結構中隨意的添加屬性，在 HTML5 中就多了 data-* attribte 這個屬性，其中的 * 就是一個可以自定義的名稱，例如：data-key='83' 或者是 data-item='1'，這也就是為什麼如果你去 google "data-key" 或 "data-item" 會找不到東西的原因了！因為那是網頁工程師自己定義出來的字詞。
在使用 data-* attribute 時，* 字號的地方不能包含大寫字母，也就是屬性名稱不能包含大寫字母，而屬性值則可以是任何的字串。例如說我們可以這樣用：
<div id="slider" data-type="slideShow">
  <img class='photo' data-item="1" data-size="xs" src="http://fakeimg.pl/350x200/?text=Hello" />
  <img class='photo' data-item="2" data-size="lg" src="http://fakeimg.pl/550x200/?text=Welcome" />
</div>

使用 JS 取得 data-* attribute 的屬性值

當我們要取得 data-* attribute 的屬性值時，我們可以簡單利用 JavaScript 中的 dataset 物件，就可以取得了，以上面的 HTML 為例，可以寫成這樣：
let slider = document.getElementById('slider');
console.log(slider.dataset.type);   //  "slideShow

let photo = document.querySelectorAll('.photo');
console.log(photo[0].dataset.item);   //  "1"
console.log(photo[0].dataset.size);   //  "xs"
如果你習慣使用的是 jQuery ，也可以用內建的 .data( ) 這個方法來獲取屬性值：
console.log($('#slider').data('type')); //  "slideShow"

透過 CSS 取得或選取 data-*attribute

在 CSS 當中，我們一樣可以取得這個 data-* attribute 的內容，例如：
<article data-content="Hello Everyone">
</article>
如果我希望在 article 這個空的區塊中顯示 data-content 內容，只需要輸入在 CSS 的地方寫入：
article::before{
  content: attr(data-content);
}
如果我是希望選取具有某個屬性和屬性值的元素，我們也可以搭配使用 CSS 中的屬性選取器：
#slider img[data-size="xs"] {
  width: 400px;
}
#slider img[data-size="lg"] {
  width: 800px;
}

程式範例

程式範例 @ CodePen
只要善用 HTML5 中的 data-* attribute 可以幫助我們在網頁開發的時候更有效率或做出更多不同的效果。

參考

0 意見:

張貼留言