-
Notifications
You must be signed in to change notification settings - Fork 0
/
Html5DataAttributes.html
29 lines (24 loc) · 1.1 KB
/
Html5DataAttributes.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Attributes</title>
</head>
<body>
<div id="msglist" data-user="Bob" data-list-size="5" data-max-age="180">-</div>
<ul>
<li data-animal-type="bird">Owl</li>
<li data-animal-type="fish">Salmon</li>
<li data-animal-type="spider">Tarantula</li>
</ul>
<script>
//Finally, we have the HTML5 dataset API which returns a DOMStringMap object. You should note that data-attribute names are mapped by dropping the data- prefix, removing hyphens and converting to camelCase, e.g.
var msglist = document.getElementById("msglist");
// msglist.innerText = "Hi " + msglist.innerText; // Do not use; introduced by Microsoft and is not a W3C standard.
// msglist.innerHTML = "Hi " + msglist.innerHTML; // Use this
msglist.dataset.maxAge = parseInt(msglist.dataset.maxAge) + 7;
msglist.innerHTML = msglist.dataset.user + " has " + msglist.dataset.listSize + " items with a max age of " + msglist.dataset.maxAge + '.';
//msglist.dataset.listSize = +show+3;
</script>
</body>
</html>