使用javascript 获取 data- 自定义属性

HTML5 data-* 的读写方式

一 、data-* 有两种设置方式：

1、可以直接在HTML元素标签上书写

<div id="test" data-age="24">
        Click Here
</div>

其中data-age 是一种自定义属性。

2、 通过javascript 操作

HTML5中元素都会有一个dataset的属性，这是一个DOMStringMap类型的键值对集合

var test = document.getElementById('test');
test.dataset.my = 'Byron';

这样就为div添加了一个data-my的自定义属性。但是使用javascript 操作 dataset 有两个地方需要注意：
1. 我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-my = ‘Byron’;的形式。

1. 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式

二、data-* 的读取方式：

使用”.”来获取属性，同样需要去掉data-前缀，连字符需要转化为驼峰命名

var test = document.getElementById('test');
test.dataset.my = 'Byron';
test.dataset.birthDate = '19890615';
test.onclick = function () {
    alert(this.dataset.my + ' ' + this.dataset.age+' '+this.dataset.birthDate);
}