html5如何使用data-*屬性

這篇文章主要為大家展示了“html5如何使用data-*屬性”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“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">

屬性值

在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-*屬性”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！