How to store custom data private to the page or application in HTML?

HTMLWeb DevelopmentFront End Technology

Use the data-* attribute in HTML to store custom data private to the page in HTML. It consists of the attribute, which should not contain any uppercase letter and should gets prefixed after data.

You can try to run the following code to implement the data-* attribute −

Example

Live Demo

<!DOCTYPE html>
<html>
   <head>
      <script>
         function display(rank) {
            var myRank = rank.getAttribute("data-rank-type");
            alert("Rank " + rank.innerHTML + " has " + myRank + " points.");
         }
      </script>
   </head>
   
   <body>
      <h1>Rank and Points</h1>
      <p>Click on any rank to generate the details.:</p>

      <ul>
      <li onclick = "display(this)" id = "fifth" data-rank-type = "500">Fifth</li>
      <li onclick = "display(this)" id = "sixth" data-rank-type = "600">Sixth</li>
      </ul>
   </body>
   
</html>
raja
Published on 14-Mar-2018 07:35:29
Advertisements