2022-11-22
整合 TailwindCSS 與 Element Plus 的 CSS class 變數
HTML/CSS
2013.03.09
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
HTML5 使用 data-*
非常簡單,以下是參考語法:
在不影響版面情況下,可以看到我們在 增添了一個屬性:data-myid="test1
。
myid
以及 test1
都是我們可以自定義的項目。myid
可以用來當作該 DIV 的識別標記,test1
則是該 DIV 的值。
接著我們可以很方便的使用 jQuery 取出這個 DIV 的值:
按下按鈕後,跳出來的 alert 視窗值會是 test1 。
假使有多組 DIV 的值要讓我們做選擇,同樣可以利用 data-*
實現該效果。
首先先把 HTML 的 data 寫好:
以及利用 jQuery 取出 data-myid
的值
兩個 DIV 的 data-myid
不一樣,點選區塊之後顯示的結果也會不同。
這兩段語法試過沒反應呢~