Wednesday 9 March 2016

how to use data-attributes in html5?

<html>
  <head>
    <meta charset="utf-8">
    <title>HTML5 data atributes</title>
  </head>
  <body>
    
    <div id="values" 
         data-name="Sky" 
         data-country="India" 
         data-id="1222">      
    </div>
 
    <script>
      var element = document.getElementById("values");
      var dataset = element.dataset;
 
      console.log(dataset.name);  
      console.log(dataset.country);
 
      element.innerHTML = dataset.name + "  is " + dataset.country+"n.....id="+dataset.id;
 
    </script>
  </body>
</html>
          
 

It will show as..

  
    
    HTML5 data atributes
  
  
    
    
 

No comments:

Post a Comment