HTML5 Custom Data Attributes

Prefixing the custom attributes with data- ensures that they will be completely ignored by the user agent. As far as the browser and indeed the website’s end user are concerned, this data does not exist.

<ul id="vegetable-seeds">
  <li data-spacing="10cm" data-sowing-time="March to June">Carrots</li>
  <li data-spacing="30cm" data-sowing-time="February to March">Celery</li>
  <li data-spacing="3cm" data-sowing-time="March to September">Radishes</li>
</ul>

Set Attributes

$("button").click(function(){
    $("#w3s").attr("data-sowing-time", "March to June");
});

Get Attributes

$("button").click(function(){
    alert($("#w3s").attr("data-sowing-time"));
});

References :
http://html5doctor.com/html5-custom-data-attributes/
http://www.w3schools.com/jquery/jquery_dom_set.asp
http://www.w3schools.com/jquery/jquery_dom_get.asp

Keywords :

HTML , Attribute , User

Related