html5自定义属性作用,HTML5自定义属性对象Dataset

2018-05-31 09:55:21

基本介绍

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

点我

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

还是上面那个button的例子

点我

var btnID = document.querySelector("#btn").Dataset.id;

console.log(btnID);//输出oecom

能够输出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代码如下：

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