Firefox 6 中将增加一个新的 API: element.dataset
用来获取自定义数据属性 data-* 设置的值。
如果使用这个 element.dataset,那么 data-* 的命名需要有以下几点注意:
- 名字不能以 xml 开头
- 名字中不能使用分号
- 名字中不能包含大写字母 A-Z
自定义数据属性将遵循以下规则转化为 DOMStringMap 键值:
- 中划线 - 将被移除;
- 跟着 - 的所有字母将被转化为大写(即驼峰命名)
代码:
<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value"></div>
var ele = document.getElementById('myDiv');
ele.dataset.id // myId
ele.dataset.myCustom.Key // This is the value
ele.dataset.newKey = 'rpsh' // 将会增加 data-new-key="rpsh"
<div id="myDiv" data-name="myDiv" data-id="myId" data-my-custom-key="This is the value" data-new-key="rpsh"></div>
注:Chrome 8.0, Opera 11.1, Safari 6 已经支持该 API。IE 尚无版本支持
参考链接:
http://davidwalsh.name/element-dataset
https://developer.mozilla.org/en/DOM/element.dataset