HTML5增加了一項新功能是自定義數據屬性，也就是data-*自定義屬性。在HTML5中我們可以使用以data-為前綴來設置我們需要的自定義屬性，來進行一些數據的存放。當然高級瀏覽器下可通過腳本進行定義和數據存取。在項目實踐中非常有用。目前采取這樣的做法的框架也有很多，最常見的當屬jQueryMobile。
具體使用方法例下：

 p id = head data-home = http://blog.csdn.net/xmtblog data-author = 偽專家 /p 

在傳統的做法中我們可以配合html' target='_blank'>jquery使用，如下：

$( #head ).attr( data-home $( #head ).attr( data-home , new 

或者純js做法：
在IE瀏覽器里，我們通過獲取對象后直接調用就可以了

document.getElementById( head ).[ data-home document.getElementById( head ).[ data-home ] = new 

在火狐和谷歌瀏覽器里，我們可以通過getAttribute方法來實現調用：

document.getElementById( head ).getAttribute( data-home document.getElementById( head ).setAttribute( data-home , new 

在HTML5中的簡潔操作方法：（dataset屬性存取data-*自定義屬性的值）
這種方式通過訪問一個元素的 dataset 屬性來存取 data-* 自定義屬性的值。這個 dataset 屬性是HTML5 JavaScript API的一部分，用來返回一個所有選擇元素 data- 屬性的DOMStringMap對象。
使用這種方法時，不是使用完整的屬性名，如data-home來存取數據，應該去掉data-前綴。
還有一點特別注意的是：data-屬性名如果包含了連字符，例如：data-date-of-birth ，連字符將被去掉，并轉換為駝峰式的命名，前面的屬性名轉換后應該是：dateOfBirth。

 p id = head data-home = http://blog.csdn.net/xmtblog data-author = 偽專家 data-date-of-birth QQ群：135430763 /p script type= text/javascript  var el = document.querySelector( #head  console.log(el.id);  console.log(el.dataset);//一個DOMStringMap  console.log(el.dataset.home);  console.log(el.dataset.author);  console.log(el.dataset.dateOfBirth);  el.dataset.dateOfBirth = 1985-01-05 // 設置data-date-of-birth的值.  //判斷屬性  console.log( testAttr in el.dataset);//false  el.dataset.testAttr = testAttr  console.log( testAttr in el.dataset);//true /script 

如果你想刪掉一個 data-屬性 ，可以這么做： delete el.dataset.home ; 或者 el.dataset.home = null;。
這樣操作起來是不是非常的方便。但有些瀏覽器可能還不支持。所以在此期間最好用的getAttribute和setAttribute來操作或配合jquery進行使用。
data-屬性選擇器
在實際開發時，可以根據自定義的data-屬性選擇相關的元素。例如使用querySelectorAll選擇元素：
//選擇所有包含’data-p’屬性的元素
document.querySelectorAll (‘[data-p]’) ;
//選擇所有包含’data-a-href’ 屬性值為red的元素
document.querySelectorAll (‘[data-a-href=”#”]’) ;
同樣的我們也可以通過data-屬性值對相應的元素設置CSSyangshi_10628_1.html' target='_blank'>CSS樣式，例如下面這個例子：

 style type = text/css  .head {  width : 256px ;  height : 200px ;  .head[data-a= btn-a ] {  color : brown  .head[data-a= btn-color ] {  color : red  /style  p class = head data-qq = 7 data-a = btn-a button按鈕 /p  p class = head data-qq = 1 data-a = btn-color button按鈕 /p 

以上就是HTML5的data-*自定義屬性是什么的詳細內容，其它編程語言

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