2017年1月20日 星期五

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


在接觸 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 的屬性值時,我們可以簡單利用 JS 的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-parent 內容,只需要輸入在 CSS 的地方寫入

article:before{
    content: attr(data-content);
}


如果我是希望選取具有某個屬性和屬性值的元素,我們也可以使用 CSS 中的屬性選取器


#slider img[data-size="xs"] {
  width: 400px;
}
#slider img[data-size="lg"] {
  width: 800px;
}


程式範例

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

http://codepen.io/PJCHENder/pen/mRWwpq



圖片來源:
參考資料:
Share:

0 意見:

張貼留言