HTML5 简介（二）：元素的 data-* 属性详解

data-* 属性是 HTML 5 的新特性，允许用户在 DOM 中存储自定义信息。

以前，需要存储含有特定含义的信息通常是通过 class 完成的，但这并不是 class 本来的用途。现在，利用 HTML 5，可以为元素添加 data-* 属性，从而存储自定义信息。其中 * 是可以自定义的部分。例如：

<article id="tu" data-category="Web Development" data-author="1"> ... </article>

通过 JavaScript 访问

通过 JavaScript 访问自定义的信息有两种方式： getAttribute() 和 dataset 。

getAttribute 方法

这就是经典的取得一个元素属性的方式，和以前一样。

document.getElementById('tu').getAttribute('data-category'); // "Web Development"

dataset 方法

这是 HTML 5 新增的方法，可以更方便的读取所有的 data 信息。

var article = document.getElementById('tu');
var data = article.dataset;
alert(data.category); // "Web Development"
alert(data.author); // 1

通过 jQuery 访问

jQuery 也提供了专门的 data 方法来访问这些信息：

$("#tu").data('category'); // "Web Development"

通过 CSS 访问

使用 attr

article::before {