HTML5增加了一項(xiàng)新功能是自定義數(shù)據(jù)屬性驴娃，也就是data-*自定義屬性耸成。在HTML5中我們可以使用以data-為前綴來(lái)設(shè)置我們需要的自定義屬性，來(lái)進(jìn)行一些數(shù)據(jù)的存放。當(dāng)然高級(jí)瀏覽器下可通過(guò)腳本進(jìn)行定義和數(shù)據(jù)存取。在項(xiàng)目實(shí)踐中非常有用屁倔。目前采取這樣的做法的框架也有很多，最常見(jiàn)的當(dāng)屬jQueryMobile。
具體使用方法例下：
<div ?id = "head" data-hone = "https://www.baidu.com/"></div>
??在傳統(tǒng)的做法中?我們可以配合jquery使用量承，如下：
$("#head").attr("data-home"); ?
$("#head").attr("data-home","new");??
或者純 js?做法：
在IE瀏覽器?里，我們通過(guò)獲取對(duì)象后直接調(diào)用就可以了
document.getElementById("head").["data-home"]; ?
document.getElementById("head").["data-home"]?=?"new";??
在火狐和谷歌瀏覽器?里穴店，我們可以通過(guò)getAttribute方法來(lái)實(shí)現(xiàn)調(diào)用：
document.getElementById("head").getAttribute("data-home"); ?
document.getElementById("head").setAttribute("data-home","new");??
再HTML5中的簡(jiǎn)潔操作方法：（dataset屬性存取data-*自定義屬性的值）
這種方式通過(guò)訪問(wèn)一個(gè)元素的 dataset 屬性來(lái)存取 data-* 自定義屬性的值撕捍。這個(gè) dataset 屬性是HTML5 JavaScript API的一部分，用來(lái)返回一個(gè)所有選擇元素 data- 屬性的DOMStringMap對(duì)象泣洞。
使用這種方法時(shí)忧风，不是使用完整的屬性名，如data-home來(lái)存取數(shù)據(jù)斜棚，應(yīng)該去掉data-前綴阀蒂。
還有一點(diǎn)特別注意的是：data-屬性名如果包含了連字符，例如：data-date-of-birth 弟蚀，連字符將被去掉蚤霞，并轉(zhuǎn)換為駝峰式?的命名，前面的屬性名轉(zhuǎn)換后應(yīng)該是：dateOfBirth义钉。
<div id="head"?data-hone = "https://www.baidu.com/" ></div>
<script>
????var el?=?document.querySelector('#head'); ?
????console.log(el.id);???
????console.log(el.dataset);//一個(gè)DOMStringMap??
????console.log(el.dataset.home);???
?? ?//判斷屬性 ?
????console.log('testAttr'?in?el.dataset);//false??
????el.dataset.testAttr?=?'testAttr';??
????console.log('testAttr'?in?el.dataset);//true??
</script>
如果你想刪掉一個(gè) data-屬性 昧绣，可以這么做： delete el.dataset.home ; ?或者 el.dataset.home = null;。
這樣操作起來(lái)是不是非常的方便捶闸。但有些瀏覽器可能還不支持夜畴。所以在此期間最好用的getAttribute?和setAttribute?來(lái)操作或配合jquery進(jìn)行使用。
data-屬性選擇器
在實(shí)際開(kāi)發(fā)時(shí)删壮，可以根據(jù)自定義的data-屬性選擇相關(guān)的元素贪绘。例如使用querySelectorAll選擇元素：
//選擇所有包含'data-div'屬性的元素
document.querySelectorAll ('[data-div]') ;
//選擇所有包含'data-a-href' 屬性值為red的元素
document.querySelectorAll ('[data-a-href="#"]') ;
同樣的我們也可以通過(guò)data-屬性值對(duì)相應(yīng)的元素設(shè)置CSS樣式，例如下面這個(gè)例子：
<style>
????.head?{ ?
?????????width?:?256px?;??
?????????height?:?200px?;??
?????}??
????.head[data-a='btn-a']?{ ?
?????????color?:?brown??
????}??
? ??.head[data-a='btn-color']?{ ?
?????????color?:?red??
????}??
</style>
<dic class = "head" data-a = "btn-a">button按鈕???</div>
?<div class = "head" data-a = "btn-color">?button按鈕 ?</div>
