HTML5data-*自定义属性
近期由于工作需要,对于data-*属性进行添加、删除操作,但是发现使用jQuery的data()方法,没有办法实现,在经过查找资料后,终于找到原因。
在HTML5中添加了data-*的方式来自定义属性,所谓data-*实际上上就是data-前缀加上自定义的属性名,使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。
误区:
jQuery的data()方法,可以实现在dom上对data-*的值进行修改或者进行添加删除。
具体表现如下:
<div id="d"></div>
$("#d").data("hh","lala");
document.getElementById("d").dataset.name = "haha";
$("div").data("hh"); //lala
结果:
<div id=”d” data-name=”haha”></div>
jquery生成的data没有表现标签上,但是却可以得到。
分析:
jQuery的data方法的改变不会体现在dom中,只保存在内存中。
jQuery .data() is initially populated withvalues from the data- attributes, but setting it only stores the associated newvalue in memory.
解决方法:
一.原生JS的dataset
data-*有两种设置方式,可以直接在HTML元素标签上书写
<div id="test" data-age="24">
Click Here
</div>
其中的data-age就是一种自定义属性,当然我们也可以通过JavaScript来对其进行操作,HTML5中元素都会有一个dataset的属性,这是一个DOMStringMap类型的键值对集合
var test = document.getElementById('test');
test.dataset.my = 'Byron';
这样就为div添加了一个data-my的自定义属性,使用JavaScript操作dataset有两个需要注意的地方
1. 我们在添加或读取属性的时候需要去掉前缀data-*,像上面的例子我们没有使用test.dataset.data-my ='Byron';的形式。
2. 如果属性名称中还包含连字符(-),需要转成驼峰命名方式,但如果在CSS中使用选择器,我们需要使用连字符格式
二.getAttribute/setAttribute
getAttribute/setAttribute可以操作所有的dataset内容,dataset内容只是attribute的一个子集,特殊就特殊在命名上了,但是dataset内只有带有data-前缀的属性用data-*最大的好处是我们可以把所有自定义属性在dataset对象中统一管理,遍历都可以。
兼容性问题
· InternetExplorer 11+
· Chrome 8+
· Firefox 6.0+
· Opera 11.10+
· Safari 6+