標籤：target 目的 開始 master 控制 round blank 控制台 embedding
HTML5 增加了一項新功能是 自訂資料屬性 ，也就是data-* 自訂屬性。在HTML5中我們可以使用以
data- 為首碼來設定我們需要的自訂屬性，來進行一些資料的存放。當然進階瀏覽器下可通過指令碼進行定義和資料存取。在項目實踐中非常有用。
<input type="button" value="按鈕" data-index="10" data-index-color="red" >
在開始之前我們先來看下之前我是如何擷取自訂屬性的。
var oBtn=document.querySelector(‘input‘);console.log(oBtn.value); //按鈕console.log(oBtn.index); //undefinedconsole.log(oBtn.dataIndex); //undefined
為什麼後面2個出現的 undefined 其實也不足為奇，因為點後面跟的只允許時符合 W3C 規範，不符合的屬性全被瀏覽器幹掉了。但就是想擷取自訂屬性還是有辦法的，代碼如下：
var oBtn=document.querySelector(‘input‘);console.log(oBtn.getAttribute(‘value‘)); //按鈕console.log(oBtn.getAttribute(‘index‘)); //10console.log(oBtn.getAttribute(‘data-index‘)); //10
當然更改與刪除分別是 ele.setAttribute(name,value) 與 ele.removeAttribute(name) ,此方法能在所有的現代瀏覽器中正常工作，但它不是HTML 5 的自訂 data-*屬性被使用目的，不然和我們以前使用的自訂屬性就沒有什麼區別了,我在此也就不多說了。
現在HTML5新增了個dataset 屬性來存取 data-* 自訂屬性的值。這個 dataset 屬性是HTML5 JavaScript API的一部分，用來返回一個所有選擇元素 data- 屬性的DOMStringMap對象。使用這種方法時，不是使用完整的屬性名稱，如 data-index 來存取資料，應該去掉data- 首碼。
還有一點特別注意的是： data- 屬性名稱如果包含了連字號，例如：data-index-color ，連字號將被去掉，並轉換為駝峰式的命名，前面的屬性名稱轉換後應該是：indexColor 。 代碼如下：
<!doctype html><html><head><meta charset="utf-8"><title>dataset</title></head><body><input type="button" value="按鈕" index="10" data-index="10" data-index-color="red"><script>var oBtn=document.querySelector(‘input‘);console.log(oBtn.dataset); //DOMStringMap對象console.log(oBtn.dataset.index); //10console.log(oBtn.dataset.indexColor); //redconsole.log(oBtn.index); //undefinedconsole.log(‘name‘ in oBtn.dataset); //falseoBtn.dataset.name=‘zpf‘;console.log(‘name‘ in oBtn.dataset); //trueoBtn.dataset.index=100;console.log(oBtn.dataset.index); //100oBtn.index=20;console.log(oBtn.index); //20</script></body></html>
順便我們在看下以上代碼的控制台輸出 圖如下：
就上面看到的input裡的index屬性，我們直接用oBtn.index,這是undefined,我們用JS給他設定了oBtn.index=20,但他的頁面中的標籤裡面的index還是等於10,如果我們想JS的設定擷取出來的與HTML結構的表現相符只能通過setAttribute和getAttribute。
在來看看現在data-這個方法。設定、擷取、更改三者修改的與HTML標籤內部屬性依依對應，而且操作起來比之前方便，所以說以後我們想儲存某些屬性在前面加個data-，這樣的話這些屬性值都會統一放在一個對象中進行管理與遍曆。
for(var name in oBtn.dataset){ console.log(oBtn.dataset[name]); }
如果你想刪掉一個 data-屬性 ，可以這麼做： delete el.dataset.id ; 或者 el.dataset.id = null ; 。
HTML5自訂屬性之data-
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
