首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

作者头像
OECOM
发布2020-07-02 09:26:25
1.6K0
发布2020-07-02 09:26:25
举报
文章被收录于专栏:OECOMOECOM

基本介绍

在HTML5中,我们经常使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们在一个button上添加id

<button data-id="oecom">点我</button>

这里的data-前缀就被称为data属性,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置。数量不受限制,在控制和渲染数据的时候提供了非常强大的控制。

Dataset的使用

还是上面那个button的例子

<button data-id="oecom" id='btn'>点我</button>

<script>
var btnID = document.querySelector("#btn").Dataset.id;
console.log(btnID);//输出oecom
</script>

能够输出oecom则表示浏览器支持Dataset属性,如果不支持将会输出undefined。需要注意的是带连字符连接的名称在使用的时候需要命名驼峰化,即大小写组合书写,这与应用元素的style对象类似,dom.style.borderColor。例如,假设上面的例子中现在有如下data属性,data-meal-time,则我们要获取相应的值可以使用:

expenseday2.dataset.mealTime

Dataset兼容性

目前情况来看Dataset兼容性不是很好,但是目前主流的浏览器都已经实现了,只是低版本的上还无法实现,就需要使用兼容的方式在低版本的浏览器上使用。

目前仅在Opera 11.1+, Chrome 9+下可以通过JavaScript,使用dataset访问你自定义的data属性。至于其他浏览器,FireFox 6+以及Safari 6+也支持dataset对象,至于IE浏览器,只有IE11及Edge浏览器支持。

如果不支持,则我们需要使用传统获取属性的方法来写

var id = document.getElementById('btn').getAttribute('data-id');

当然你也可以进行一次封装,Dataset返回值其实就是带有data-前缀的一个属性值键值对对象。

function getDataSet(ele){
var attrs = ele.attributes,
expense = {}, i, j;  
for (i = 0, j = attrs.length; i < j; i++) {
  if(attrs[i].name.substring(0, 5) == 'data-') {
    expense[attrs[i].name.substring(5)] = attrs[i].value;
  }
}
return expense
}

dataset的操作

您可以像下面这样操作名-值对:

chartInput = [];
for (var item in expense) {
  chartInput.push(expense[item]);
}

上面这几行代码作用是让所有的自定义的属性值塞到一个数组中。

如果你想删掉一个data属性,可以这么做:

delete ele.dataset.id;

如果你想给元素添加一个属性,可以这么做:

ele.dataset.dessert = 'icecream';

CSS中的data属性

我们可以基于data属性值对相应的元素设置CSS样式,例如下面这个例子:

HTML代码如下:

<div class="mm" data-name="无版权"></div>
<div class="mm" data-name="undefined"></div>

CSS代码如下:

.mm{width:256px; height:200px;}
.mm[data-name='无版权']{background:url(mm1.jpg) no-repeat;}
.mm[data-name='undefined']{background:url(mm3.jpg) no-repeat;}

注意:一定要确保浏览器的兼容性情况下使用dataset

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018-05-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Dataset的使用
  • Dataset兼容性
  • dataset的操作
  • CSS中的data属性
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档