跳至主要内容

[技術分享] 什麼是 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-* attribute 這個屬性,其中的 * 就是一個可以自定義的名稱,例如: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 可以幫助我們在網頁開發的時候更有效率或做出更多不同的效果。

參考