HTML5 新属性 data-attribute

HTML5 添加了一种新的标签属性：自定义 data-attribute。这种属性看起来虽然很奇怪但事实上是很有用的。

这属于一种私有属性，你可以随意定义 data- 属性，用户在浏览器内是看不到这种属性的，同时这种属性完全不会影响网页布局或展示。

下面就是一个例子：

<li class="user" data-name="John Resig" data-city="Boston"
    data-lang="js" data-food="Bacon">
    <b>John says:</b> <span>Hello, how are you?</span>
</li>

上面代码在 HTML5 内是完全有效的，这种形式的属性会大大有利于 JavaScript 的开发。

var user = document.getElementsByTagName("li")[0];
var pos = 0, span = user.getElementsByTagName("span")[0];

var phrases = [
    {name: "city", prefix: "I am from "},
    {name: "food", prefix: "I like to eat "},
    {name: "lang", prefix: "I like to program in "}
];

user.addEventListener( "click", function(){
    var phrase = phrases[ pos++ ];
    // Use the .dataset property
    span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];
}, false);

span.innerHTML = phrase.prefix + user.getAttribute("data-" + phrase.name );

Refer to ejohn.org