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属性集里。
