HTML5 data-*自定义属性

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+