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
扫描二维码关注公众号,回复:
3236539 查看本文章