新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。

使用data属性的简单示例

例如，给一个span元素添加data-date属性，代码如下：

1
<span data-date="2016.3.9" id="demo">Song</span>

由上可以看出，给HTML元素添加自定义属性，只需要使用data-前缀加上自定义属性名即可。

那么在JavaScript中如何操作自定义的属性值了，有以下四种方法。

使用getAttribute以及setAttribute

作为HTML元素的标签，dataset的存取也服从getAttribute、setAttribute，而且这两个方法兼容性也最广。

1
2
3
4
5
//获取属性
var date = document.getElementById("demo").getAttribute("data-date");
//设置属性
document.getElementById("demo").setAttribute("data-date","2016.3.6");

使用dataset API

通过.dataset API，我们可以更方便的获取元素的所有data字段，并以对象的方式，方便存取和遍历。

1
2
3
4
5
6
7
8
9
//获取属性
var date = document.getElementById("demo").dataset.date;
console.log(date);
//设置属性
document.getElementById("demo").dataset.date = "2016.3.8";
//增加属性
document.getElementById("demo").dataset.time = "19:30";

这时候我们在访问data时，就不需要”data-“关键词了，直接利用.dataset.name就可以访问到。这比上面的方法更方便。所做出的任何更改，都是可以实时反映到元素data属性上的。

如果涉及到连字符”-“，可以采取驼峰化的方法来存取：

1
<span id="en" data-user-name="nummy"></span>

其中的user-name要写成userName。

使用jQuery.attr方法

1
2
3
4
5
//获取属性
var date = $("#demo").attr("data-date");
//设置属性
$("#demo").attr("data-date","2016.3.7");

这与jQuery.attr运用在其他属性上时的情况完全一样，并且所做出的任何更改，都是可以实时反映到元素data属性上的。

使用jQuery.data方法

这个方法不需要使用data-关键字。

1
2
3
4
5
//获取属性
var date = $("#demo").data("date");
//设置属性
$("#demo").data("date","2016.3.7");

这样的方法也能出色的存取data属性，但是需要注意，jQuery.data对data数据做出的更改，不会反映到HTML元素data属性上。也就是说在jQuery中data-date属性的值为2016.3.7，但是在HTML元素中还是为2016.3.6。