HTML5 Data özelliği

Ref: John Resig

<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>

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 );