在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。

使用data-*可以解决自定义属性混乱无管理的现状。下面展开对此属性的操作介绍

 

1.写入

//方式1：JavaScript方式elementNode.dataset.attributeName = attributeValue;//方式2：HTML方式(以DIV为例)
     

 

2.读取

　　2.0  我们在添加或读取属性的时候需要去掉前缀data-*，像上面的例子我们没有使用test.dataset.data-attributeName = attributeValue;的形式

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

//javaScriptvar attributeVaule = elementNode.dataset.attributeName;//CSS[data-attributeNamePart1-Part2]{  // style...  }

 

3.综合demo

//css[data-johnny-birthdate]{    width: 100%;    height: 5em;    background-color: red;}//html...	
     
...//jsvar 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)