The HTML data-* attribute allows embedding custom data attributes on all HTML elements.
The HTML data-* attribute contains two parts:
- the attribute name (should not contain any uppercase letters, and must be at least one character long after the prefix “data-“).
- the attribute value (can be any string).
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function showDetails(food) {
var foodType = food.getAttribute("data-food-type");
alert("The " + food.innerHTML + " is a " + foodType + " food.");
}
</script>
</head>
<body>
<ul>
<li onclick="showDetails(this)" id="thai" data-food-type="mexican">Taco</li>
<li onclick="showDetails(this)" id="european" data-food-type="spanish">Paella</li>
<li onclick="showDetails(this)" id="middle-eastern" data-food-type="middle-eastern">Kibbeh</li>
</ul>
</body>
</html>Output:
Click on the name of the meal to see what kind of cuisine is from:
- Taco
- Paella
- Kibbeh
Enjoy coding!
Read also:
HTML contenteditable Attribute