Global data-* Attributes - HTML CSS HTML Global Attribute

HTML CSS examples for HTML Global Attribute:data

  1. HOME
  2. HTML CSS
  3. HTML Global Attribute
  4. data

Description

The data-* attributes is used to store custom data private to the page or application.

Custom attributes prefixed with "data-" will be completely ignored by the user agent.

Attribute Values

Value Description
somevalue Specifies the value of the attribute (as a string)

The following code shows how to Use the data-* attribute to embed custom data:

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(animal) {<!--from   w  w w  .  ja v a2 s.  c o m-->
    var animalType = animal.getAttribute("data-animal-type");
    console.log("The " + animal.innerHTML + " is a " + animalType + ".");
}
</script>
</head>
<body>

<h1>Species</h1>
<p>Click on a species to see what type it is:</p>

<ul>
  <li onclick="showDetails(this)" id="a" data-animal-type="css">CSS</li>
  <li onclick="showDetails(this)" id="b" data-animal-type="html">HTML</li>
  <li onclick="showDetails(this)" id="c" data-animal-type="javascript">Javascript</li>
</ul>

</body>
</html>

Related Tutorials