dataset的使用教程

dataset的使用

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

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

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;