首页 > 程序开发 > web前端 > HTML/CSS >

dataset的使用教程

2018-09-12

dataset的使用教程。 dataset用来为html普通标签设置自定义属性,方便储存一些数据 dataset自定义属性的格式:data-xx;前面的data-是固定的,后面的xx一般为表示与自定义属性相关的字符串,可以自由发挥。如下面代码所示

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;
相关文章
最新文章
热点推荐