HTML5之自定义数据属性（data-）

HTML5中新增了一个自定义的数据属性，该属性以“data-”为前缀。

在开发中，我们可以方便地利用它来存放一些数据，然后通过JavaScript脚本来获取相应的属性值，从而得到预设的数据内容。如：

<div id="user" data-key="admin" data-user="winstar"></div>

 

在脚本中获取/设置data-属性值（使用jQuery）

var key = $('#user').attr('data-key');
$('#user').attr('data-key', 'customer');

 

上述的对于data-自定义数据属性的使用在所有现代浏览器中都能正常工作，但它不是HTML5引进data-的真实用途。因为在data-出现以前，我们有时也会为标签添加自定义的属性，采用类似的方法也能正常工作。

 

HTML5在引进data-定义数据属性目的在于：

（1）标准化自定义属性，使HTML文档规范化；

（2）提供相应的JavaScript API：dataset属性，方便对自定义数据属性的操作。

 

dataset属性使用示例：

<div id="user" data-key="admin" data-out-of-time></div>

 

在JavaScript中读取/设置：

var user = document.getElementById('user');
var key = user.dataset.key;   //'admin'
var timeout = user.dataset.outOfTime    //注意：连字符变成驼峰

user.dataset.key = 'customer';

 

但是，由于目前浏览器对dataset的支持并不是很好，所以目前还是使用之前的方法读取data-的属性值。