data-*自定義屬性的使用方式
1.可以對含有該屬性的標簽進行樣式的賦值，
<style>
[data-age]
{
background-color: #0f0;
width: 100px;
margin: 20px;
}
</style>
<div id="test" data-age="24">
click here
</div>
image.png
2.可以獲取該屬性的值，為自定義屬性，里面包含其私有的屬性值，例子見下面與setAttribute的區別。
注意
我們在添加或讀取屬性的時候需要去掉前綴data-*，像上面的例子我們沒有使用
test.dataset.data-my = 'Byron';的形式。如果屬性名稱中還包含連字符
-，需要轉成駝峰命名方式，但如果在CSS中使用選擇器，我們需要使用連字符格式
dataset和setAttribute的使用區別
dataset和setAttribute一樣都是可以自定義屬性，但dataset是偏向自定義的數據集的,可以類似于地址信息這些，就是說dataset是setAttribute一個子集，是更為確切一部分信息的集合。
<script>
var test = document.getElementById('test');
test.dataset.birthNumber = '11111';
test.setAttribute('data-num', 25);
test.setAttribute('grade', 97);
console.log(test.dataset);
</script>
image.png
從結果圖可以看出，grade并沒有在dataset屬性集里。
