HTML笔记 ·

HTML5自定义属性对象Dataset

基本介绍

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

参与评论