HTML5 增加了一個 data-* 的屬性，可以讓大家很方便的存取這些數據，而且完全不會影響你的版面。假使要做網頁互動，或是需要將資料存到後端紀錄，都非常的方便喔！

A custom data attribute is an attribute in no namespace whose name starts with the string 「data-「, has at least one character after the hyphen, is XML-compatible, and contains no characters in the range U+0041 to U+005A (LATIN CAPITAL LETTER A to LATIN CAPITAL LETTER Z).

Embedding custom non-visible data with the data-* attributes

範例 1

HTML5 使用 data-* 非常簡單，以下是參考語法：

在不影響版面情況下，可以看到我們在 增添了一個屬性：data-myid="test1。

myid 以及 test1 都是我們可以自定義的項目。myid 可以用來當作該 DIV 的識別標記，test1 則是該 DIV 的值。

接著我們可以很方便的使用 jQuery 取出這個 DIV 的值：

按下按鈕後，跳出來的 alert 視窗值會是 test1 。

範例 2

假使有多組 DIV 的值要讓我們做選擇，同樣可以利用 data-* 實現該效果。
首先先把 HTML 的 data 寫好：

以及利用 jQuery 取出 data-myid 的值

兩個 DIV 的 data-myid 不一樣，點選區塊之後顯示的結果也會不同。

更多 CSS 相關文章

難解的 CSS 排版：認識對齊(下)

2019-09-05

難解的 CSS 排版：認識對齊(下)

HTML/CSS

難解的 CSS 排版：認識對齊(上)

2019-09-04

難解的 CSS 排版：認識對齊(上)

HTML/CSS

CSS Grid 語法筆記

2017-10-16

CSS Grid 語法筆記

HTML/CSS

Bootstrap 4 的 Grid 應用介紹

2017-08-14

Bootstrap 4 的 Grid 應用介紹

HTML/CSS

傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

2017-05-08

傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

HTML/CSS

CSS Flexbox 介紹與解析

2016-06-27

CSS Flexbox 介紹與解析

HTML/CSS