在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。
使用data-*可以解决自定义属性混乱无管理的现状。下面展开对此属性的操作介绍
1.写入
//方式1：JavaScript方式 elementNode.dataset.attributeName = attributeValue; //方式2：HTML方式(以DIV为例) <div data-attributeName='value' ></div>
2.读取
2.0 我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-attributeName = attributeValue;的形式
2.1 如果属性名称中还包含连字符(-)，需要转成驼峰命名方式，但如果在CSS中使用选择器，我们需要使用连字符格式
//javaScript
var attributeVaule = elementNode.dataset.attributeName;
//CSS
[data-attributeNamePart1-Part2]{
// style...
}
3.综合demo
//css
[data-johnny-birthdate]{
100%;
height: 5em;
background-color: red;
}
//html
...
<body>
<table id="table">
</table>
</body>
...
//js
var table = document.getElementById("table");
table.dataset.johnnyBirthdate = "1995-01-01"; //设置(添加)自定义属性
console.log("dataset.johnnyBirthdate[JS]:", table.dataset.johnnyBirthdate);//获取自定义属性值
console.log("data-johnny-birthdate[HTML/CSS]:", table.dataset.johnnyBirthdate);//获取自定义属性值
HTML：页面结构
HTML：运行效果
控制台：JavaScript
参考文献：
[HTML5 data-* 自定义属性](http://www.cnblogs.com/dolphinX/p/3348458.html)