HTML5增加了一項(xiàng)新功能是：自定義數(shù)據(jù)屬性，也就是data-*自定義屬性手报。在HTML5中我們可以使用data-為前綴來設(shè)置我們需要的自定義屬性黄锤，來進(jìn)行一些數(shù)據(jù)的存放骗爆。當(dāng)然高級瀏覽器下可以通過腳本進(jìn)行定義和數(shù)據(jù)存取。在項(xiàng)目實(shí)踐中非常有用度陆。
例如：
<div id="div1" class="div1" data-id = "myId" data-class = "myClass" data-id-and-class = "Hello"></div>
使用attribute方法存取 data-* 自定義屬性的值
使用attribute方法存取 data-* 自定義屬性的值非常方便：
var div = document.getElementById("div1");
//獲取自定義的值
var myId = div.getAttribute("data-id");
var myClass = div.getAttribute("data-class");
var my = div.getAttribute("data-id-and-class");
console.log(myId); //myId
console.log(myClass); //myClass
console.log(my); //Hello
//設(shè)置自定義的值
div.setAttribute("data-name","nicai")
方法能在所有現(xiàn)代瀏覽器中正常工作艾凯，但它不是HTML5的自定義data-*屬性被使用的目的，不然和我們以前使用自定義屬性就沒有什么區(qū)別了懂傀，如下：
<div id="div2" myName = "Hello"></div>
<script>
var div = document.getElementById("div2");
var myName = div.getAttribute("myName");
console.log(myName); //Hello
</script>
這種“原始”的自定義屬性和上面的data-*自定義屬性沒有什么區(qū)別趾诗，只是屬性名不一樣。
dataset屬性存取data-自定義屬性的值
這種方式通過訪問一個元素的dataset屬性來存取data-自定義屬性的值蹬蚁。這個dataset屬性是HTML5 Javascript API的一部分恃泪，用來返回一個所有選擇元素的data-*屬性的DOMStringMap對象。
使用這種方法時犀斋，不是使用完整的屬性名贝乎，如data-id來存取數(shù)據(jù)，應(yīng)該去掉data-前綴叽粹。
還有一點(diǎn)特別注意的是：data-屬性名如果包含了連字符览效，例如 data-id-and-class，連字符將被去掉球榆，并轉(zhuǎn)換為駝峰式的命名朽肥，前面的屬性應(yīng)該寫成idAndClass禁筏。
下面看一個例子：
<div id="div1" class="div1" data-id = "myId" data-class = "myClass" data-id-and-class = "Hello"></div>
<script>
var div = document.getElementById("div1");
var attr = div.attributes;
var data = div.dataset;
var id = div.id;
var myId = div.dataset.id;
var iac = div.dataset.idAndClass;
console.log(attr); //NamedNodeMap對象
console.log(data); //DOMStringMap對象
console.log(id); //div1
console.log(myId); //myId
console.log(iac); //Hello
</script>
如果你想刪掉一個data-屬性持钉，可以這么做：
delete div.dataset.id;
看起來是很好用的，但是不幸的是篱昔，新的dataset屬性只有在Chrome8+ 每强、FireFox(Gecko) 6.0 、 Internet Explore 11+州刽、 Opera 11.10+空执、 Safari 6+ 瀏覽器中實(shí)現(xiàn)，所以在此期間最好還是使用getAttribute和setAttribute來操作穗椅。
關(guān)于data-*屬性選擇器
在實(shí)際開發(fā)中辨绊，你可能會發(fā)現(xiàn)他很有用，可以根據(jù)自定義的data-屬性選擇相關(guān)的元素匹表。例如使用querySelectAll選擇元素门坷，例如
//選擇所有具有data-class屬性的元素
var div = document.querySelectorAll("[data-class]");
//選擇所有data-class屬性值為my的元素
var div = document.querySelectorAll("[data-class='my']");
同樣的我們也可以通過data-屬性值對應(yīng)的元素設(shè)置CSS樣式，如下
<style>
div[data-class]{
width: 100px;
height: 100px;
background: #8959a8;
border: 1px solid #cccccc;
}
div[data-class="my"]{
box-shadow: 0 0 5px 5px #CCCCCC;
}
</style>
<div id="div1" data-class = "myClass"></div>
<div id="div2" data-class = "my" ></div>
