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 相關文章

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

2022-11-22

整合 TailwindCSS 與 Element Plus 的 CSS class 變數

HTML/CSS

在 Vue3 + Vite 專案下設定亮色與暗色主題

2022-11-18

在 Vue3 + Vite 專案下設定亮色與暗色主題

HTML/CSS

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

2022-11-17

在 Vue3 + Vite 專案下安裝使用 SASS/ SCSS 以及 CSS Module

HTML/CSS

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

2022-09-23

使用 SCSS each 與 CSS var 變數，調整 Bootstrap, Element UI 的 CSS 樣式

HTML/CSS

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

2019-09-05

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

HTML/CSS

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

2019-09-04

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

HTML/CSS