html5儲存頁面或應用程式的私有自訂資料的data-* 屬性

實例

使用data-* 屬性來嵌入自訂資料：

<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li> 
<li data-animal-type="spider">Tarantula</li> 
</ul>

瀏覽器支援

IE、Firefox、Chrome、Safari、Opera

所有主流瀏覽器都支援data-* 屬性。

定義和用法

data-* 屬性用於儲存頁面或應用程式的私人自訂資料。

data-* 屬性賦予我們在所有 HTML 元素上嵌入自訂 data 屬性的能力。

儲存的（自訂）資料能夠被頁面的 JavaScript 中利用，以創建更好的使用者體驗（不進行 Ajax 呼叫或伺服器端資料庫查詢）。

data-* 屬性包括兩個部分：

• 屬性名稱不應該包含任何大寫字母，且在前綴"data-" 之後必須有至少一個字元

• 屬性值可以是任意字串

#註解：使用者代理程式會完全忽略前綴為"data-" 的自定義屬性。

HTML 4.01 與 HTML5 之間的差異

data-* 屬性是 HTML5 中的新屬性。

語法

<element data-*="somevalue">

屬性值

#值	描述
somevalue	規定屬性的值（以字串）。

在jQuery的attr與prop提到在IE9之前版本中如果使用property不當會造成記憶體洩漏問題，而且關於Attribute和Property的差異也讓人十分頭痛，在HTML5中加入了data-*的方式來自訂屬性，所謂data-*其實上就是data-前綴加上自訂的屬性名，使用這樣的結構可以進行資料存放。使用data-*可以解決自訂屬性混亂無管理的現狀。

讀寫方式

data-*有兩種設定方式，可以直接在HTML元素標籤上書寫

<div id="test" data-age="24">
        Click Here
    </div>

其中的data-age就是一種自訂屬性，當然我們也可以透過JavaScript來對其進行操作，HTML5中元素都會有一個dataset的屬性，這是一個DOMStringMap類型的鍵值對集合

var test = document.getElementById('test');
        test.dataset.my = 'Byron';

這樣就為div新增了一個data-my的自訂屬性，使用JavaScript操作dataset有兩個需要注意的地方

1. 我們在新增或讀取屬性的時候需要去掉前綴data- *，像上面的範例我們沒有使用test.dataset.data-my = 'Byron';的形式。

2. 如果屬性名稱中也包含連字號(-)，需要轉成駝峰命名方式，但如果在CSS中使用選擇器，我們需要使用連字格式

以上是html5儲存頁面或應用程式的私有自訂資料的data-* 屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！