基本介绍
在HTML5中,我们经常使用data-前缀设置我们需要的自定义属性,来进行一些数据的存放,例如我们在一个button上添加id
<button data-id="oecom">点我</button>
这里的data-
前缀就被称为data属性
,其可以通过脚本进行定义,也可以应用CSS属性选择器进行样式设置。数量不受限制,在控制和渲染数据的时候提供了非常强大的控制。
还是上面那个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兼容性不是很好,但是目前主流的浏览器都已经实现了,只是低版本的上还无法实现,就需要使用兼容的方式在低版本的浏览器上使用。
目前仅在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
}
您可以像下面这样操作名-值对:
chartInput = [];
for (var item in expense) {
chartInput.push(expense[item]);
}
上面这几行代码作用是让所有的自定义的属性值塞到一个数组中。
如果你想删掉一个data属性
,可以这么做:
delete ele.dataset.id;
如果你想给元素添加一个属性,可以这么做:
ele.dataset.dessert = 'icecream';
我们可以基于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