dataset的使用

dataset的使用

dataset用来为html普通标签设置自定义属性，方便储存一些数据

dataset自定义属性的格式：data-xx；前面的data-是固定的，后面的xx一般为表示与自定义属性相关的字符串，可以自由发挥。如下面代码所示，img标签中的data-src属性就属于一种自定义的dataset属性。

<img src="loading.gif" data-src="img1.jpg" alt="img1">

1、dataset的设置

dataset的设置有两种方法，一种是通过setAttribute()方法设置，另一种是通过dataset的API设置，具体实现如下：

设置上面img标签的data-src属性

setAttribute()方法：

let img = document.querySelector('img');
img.setAttribute('data-src', 'img2.jpg');

dataset的API方法：

let img = document.querySelector('img');
img.dataset.src = 'img2.jpg';

2、dataset的获取

dataset的获取也是有两种方法，一种是通过getAttribute()方法获取，另一种是通过dataset的API获取，具体实现如下：

获取上面img标签的data-src属性

getAttribute()方法：

let img = document.querySelector('img');
let dataSrc = img.getAttribute('data-src');

dataset的API方法：

let img = document.querySelector('img');
let dataSrc = img.dataset.src;

参考文献：

[1] Html5 DataSet