JavaScript之HTML5 data-* 自定义属性[HTML5标准 node.dataset.attributeName]

在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)