关于data属性的一些常见的处理方式

我们知道在html标签上通用的属性有以下这些：

1.title
2.class
3.id
4.name
5.data-属性名
6.style

这些东西大部分都有其各自的效用，这里就不一一多说。

在jQuery的attr与prop提到过在IE9之前版本中如果使用property不当会造成内存泄露问题，而且关于Attribute和Property的区别也让人十分头痛，在HTML5中添加了data-*的方式来自定义属性，所谓data-*实际上上就是data-前缀加上自定义的属性名，使用这样的结构可以进行数据存放。使用data-*可以解决自定义属性混乱无管理的现状。

data-自定义属性的读写方式有两种：

1.直接写在标签里面   <div data-name="123"></div>

2.通过javascript设置  div.dataset.name="123";这里注意一个问题，不要写成是div.dataset.data-name="123";或者div.dataset.dataName="123";(这里是一个小坑，注意点，然后dataset有兼容性问题)

Internet Explorer 11+

Chrome 8+

Firefox 6.0+

Opera 11.10+

Safari 6+

以上就是浏览器的兼容性的列表

当然这里也可以用getattribute来获取，或者setattribute来设置（div.setattribute("data-name","123");)这里可以把dataset看成是attribute的 一个子集。

当然data-属性名也可以用css3选择器获取来[data-name]来选中，然后添加样式.

 用jquery来获取data属性或者设置data属性的话，那就更加简单了，直接$("div").data("name);就可以获取了，当然这里面也可以用json来处理。

假如<div data-name='{"game":"123","age":"16"}'></div>

那这里面就是$("div").data("name").game或者$("div").data("name").age来或者属性，很方便。这里注意一点外面不要用双引号，用单引号。