這篇文章主要為大家展示了“html5如何使用data-*屬性”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“html5如何使用data-*屬性”這篇文章吧。

作為一家“創(chuàng)意+整合+營銷”的成都網(wǎng)站建設(shè)機構(gòu)，我們在業(yè)內(nèi)良好的客戶口碑。創(chuàng)新互聯(lián)提供從前期的網(wǎng)站品牌分析策劃、網(wǎng)站設(shè)計、網(wǎng)站設(shè)計、成都網(wǎng)站制作、創(chuàng)意表現(xiàn)、網(wǎng)頁制作、系統(tǒng)開發(fā)以及后續(xù)網(wǎng)站營銷運營等一系列服務(wù)，幫助企業(yè)打造創(chuàng)新的互聯(lián)網(wǎng)品牌經(jīng)營模式與有效的網(wǎng)絡(luò)營銷方法,創(chuàng)造更大的價值。

實例

使用 data-* 屬性來嵌入自定義數(shù)據(jù)：

Owl
Salmon 
Tarantula 

瀏覽器支持

IE、Firefox、Chrome、Safari、Opera

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

定義和用法

data-* 屬性用于存儲頁面或應(yīng)用程序的私有自定義數(shù)據(jù)。

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

存儲的（自定義）數(shù)據(jù)能夠被頁面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗（不進行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫查詢）。

data-* 屬性包括兩部分：

• 屬性名不應(yīng)該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符

• 屬性值可以是任意字符串

注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。

HTML 4.01 與 HTML5 之間的差異

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

語法

屬性值

值	描述
somevalue	規(guī)定屬性的值（以字符串）。

在jQuery的attr與prop提到過在IE9之前版本中如果使用property不當(dāng)會造成內(nèi)存泄露問題，而且關(guān)于Attribute和Property的區(qū)別也讓人十分頭痛，在HTML5中添加了data-*的方式來自定義屬性，所謂data-*實際上上就是data-前綴加上自定義的屬性名，使用這樣的結(jié)構(gòu)可以進行數(shù)據(jù)存放。使用data-*可以解決自定義屬性混亂無管理的現(xiàn)狀。

讀寫方式

data-*有兩種設(shè)置方式，可以直接在HTML元素標簽上書寫

        Click Here
    

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