HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放
读写方式
data-*有两种设置方式,
1、可以直接在HTML元素标签上书写
<div id="test" data-age="24"> Click Here </div>
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';的形式。
2. 如果属性名称中还包含连字符(-),需要转成驼峰命名方式,但如果在CSS中使用选择器,我们需要使用连字符格式
例如:
<style type="text/css"> [data-birth-date] { background-color: #0f0; width:100px; margin:20px; } </style>
test.dataset.birthDate = '19890615';
此外,dataset内容是attribute的一个子集,特殊就特殊在命名上了,但是dataset内只有带有data-前缀的属性
参考出处:http://www.cnblogs.com/dolphinX/p/3348458.html