HTML data-* Global Attribute
Description
The global attribute data-* is used to store user data (the ability to insert an attribute with user data to any HTML element). This attribute makes it possible, using JavaScript, to provide more advanced features for the user, without resorting to server-side requests.
The attribute name must not contain capital letters, and must also contain at least one character after the prefix data-. The attribute value can be any string.
Syntax
<element data-*="value">Values
- *This value must not contain capital letters, and must also contain at least one character after the prefix data-. The attribute value can be any string.
- valueThis value represents the data that is stored.
Example
<!DOCTYPE html>
<html>
<head>
<title>Data Global Attribute</title>
</head>
<body>
<p id="test">Click on an item for details:</p>
<script>
function showDetails(test) {
var testType = test.getAttribute("data-test");
alert(test.innerHTML + " is a " + testType + ".");
}
</script>
<ul>
<li onclick="showDetails(this)"data-test="star">The Sun</li>
<li onclick="showDetails(this)"data-test="satellite">The Moon</li>
<li onclick="showDetails(this)"data-test="planet">Mercury</li>
</ul>
</body>
</html> Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| Yes | 12 | Yes | Yes | Yes | Yes |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| Yes | Yes | Yes | Yes | Yes | Yes |
Share this Page
If you have enjoyed using CSSPortal, please consider sharing this page with other users, just click on your preferred social media link or copy the webpage from the link below.
URL