频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
dataset的使用教程
2018-09-12 15:06:12      个评论      
收藏   我要投稿

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(&注册送白菜3839;img&注册送白菜3839;);
img.setAttribute(&注册送白菜3839;data-src&注册送白菜3839;, &注册送白菜3839;img2.jpg&注册送白菜3839;);

dataset的API方法:

let img = document.querySelector(&注册送白菜3839;img&注册送白菜3839;);
img.dataset.src = &注册送白菜3839;img2.jpg&注册送白菜3839;;

2、dataset的获取

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

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

getAttribute()方法:

let img = document.querySelector(&注册送白菜3839;img&注册送白菜3839;);
let dataSrc = img.getAttribute(&注册送白菜3839;data-src&注册送白菜3839;);

dataset的API方法:

let img = document.querySelector(&注册送白菜3839;img&注册送白菜3839;);
let dataSrc = img.dataset.src;
点击复制链接 与好友分享!回本站首页
相关TAG标签 dataset 使用 教程
上一篇:idea+maven+mybatis入门教程(mybatis简介)
下一篇:去掉vue路由中的注册送白菜38号
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑--致力于做实用的IT技术学习网站

注册送白菜38