HTML中新增了許多新的屬性，今天將要介紹HTML5中的data-* 屬性，希望對大家有所幫助。

【推薦課程：HTML5課程】

data-* 屬性的含義

data-* 屬性用于存儲頁面或html' target='_blank'>應(yīng)用程序的私有自定義數(shù)據(jù)是所有HTML元素上自定義data屬性，它存儲的數(shù)據(jù)能夠被JavaScript所利用，可以創(chuàng)建更好的用戶體驗。

data-* 屬性包含兩個部分分別為：

屬性名：在屬性名中不能包含任何大寫字母，而且在前綴“data-”之后必須有一個字符，不能為空。

屬性值：屬性值可以是任何字符串。

 element data-*= somevalue 

例

data-animal-type= 動物類 

如何使用data-*屬性

由于自定義數(shù)據(jù)屬性是有效的HTML 5，因此可以在支持HTML 5文檔類型的任何瀏覽器中使用它們：

我們可以設(shè)置存儲在JavaScript動畫中可能需要的元素的初始高度或不透明度，也可設(shè)置通過JavaScript加載的Flash影片的參數(shù)以及存儲自定義網(wǎng)絡(luò)分析標(biāo)記數(shù)據(jù)等等。

例：

 !DOCTYPE html  html  head  meta charset= UTF-8  title Document /title  style list-style: none;width:50px;height:50px;background-color: pink;text-align: center;margin-left: 10px;line-height: 50px;float:left; /style  /head  body  script function showDetails(animal) { var animalType = animal.getAttribute( data-animal-type  console.log(animal.innerHTML + 是一種 + animalType + 。  /script  p 點(diǎn)擊li時顯示其類別 /p  li quot;showDetails(this) id= owl data-animal-type= 動物類 小貓咪 /li  li quot;showDetails(this) id= salmon data-animal-type= 水果類 蘋果 /li  /ul  /body  /html 

效果圖：

點(diǎn)擊之前

點(diǎn)擊之后

注意

數(shù)據(jù)屬性雖然靈活，但是數(shù)據(jù)屬性并不適用于所有問題比如存在更適合存儲數(shù)據(jù)的現(xiàn)有屬性或元素，則不應(yīng)使用數(shù)據(jù)屬性。例如，日期/時間數(shù)據(jù)應(yīng)該以語義方式顯示，而不是存儲在自定義數(shù)據(jù)屬性中，不應(yīng)該將特定的數(shù)據(jù)屬性與任何樣式的CSS相聯(lián)系。另外隨著數(shù)據(jù)屬性的使用越來越廣泛，命名約定中的沖突可能會變得越來越大，所以在命名時要注意盡量避免與插件或者公共屬性名混淆

總結(jié)：以上就是本篇文章的全部內(nèi)容了，希望對大家學(xué)習(xí)HTML5有所幫助。

以上就是如何使用HTML5中的data-*屬性的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。