email:gm4linus at gmail dot com
你可能在HTML代码中看到很多人写类似如下的代码
<div data-id="id" data-age="age" id="user">display name</div>
其实这是HTML5规范的一部分,DOM对象中有个dataset属性对象,可以在该对象中存一些与该DOM对象相关的数据。如上写法是在生成dom对象时对dataset的一个初始化的动作,dataset中会存在一个id属性和age属性。这里需要注意data-仅仅是一个约定好的前缀,在生成DOM对象时所有已data-开头的属性会将其去掉前缀data-后存在dataset中。
从http://caniuse.sinaapp.com/html/item/dataset/index.html可以看出该属性的浏览器兼容性还是不错的,在不兼容的浏览器中可以使用getAttribute之类的方法来降级使用。
js示例如下:
var dataset = document.getElementById("cuebar");
if( '18' === dataset.dataset['age'] ){
console.log(' is 18');
}
dataset['oox'] = 'some value';
dataset['id'] = 'new id';
需要注意的是dataset中的属性值只能是字符串,非字符串会转换为字符串后存储,所以要存对象类型是务必小心。