小姜哥的微信

DOM对象的dataset属性

你可能在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.mojijs.com/html/item/dataset/index.html可以看出该属性的浏览器兼容性还是不错的,在不兼容的浏览器中可以使用getAttribute之类的方法来降级使用。

js示例如下:

var dataset = document.getElementById("cuebar");

if( '18' === dataset.dataset['age'] ){

console.log(&#39;  is  18&#39;);

}

dataset['oox'] = 'some value';

dataset['id'] = 'new id';

需要注意的是dataset中的属性值只能是字符串,非字符串会转换为字符串后存储,所以要存对象类型是务必小心。

推荐文章

回到顶部