下面的例子展示了你如何在HTML5中定制数据的属性。使用dataset属性和getAttribute()方法。
<!DOCTYPE html>
<html>
<head>
<title>Using custom data attributes in HTML5</title>
<style type="text/css">
th {
font-style: italic;
font-weight: normal;
text-align: right;
}
</style>
</head>
<body>
<table id="status" data-city="San Francisco" data-zipCode="94121-1437" data-user-name="Peter">
<tr>
<th>dataset.zipcode:</th>
<td id="cell1"></td>
</tr>
<tr>
<th>dataset['zipcode']:</th>
<td id="cell2"></td>
</tr>
<tr>
<th>getAttribute('data-zipCode'):</th>
<td id="cell3"></td>
</tr>
<tr>
<th>dataset.userName:</th>
<td id="cell4"></td>
</tr>
<tr>
<th>dataset['userName']:</th>
<td id="cell5"></td>
</tr>
<tr>
<th>getAttribute('data-user-name'):</th>
<td id="cell6"></td>
</tr>
</table>
<button id="btn" οnclick="btn_clickHandler(event);">Click to get dataset zipCode and user-name</button>
<script type="text/javascript">
function btn_clickHandler(event) {
var stat = document.getElementById("status");
document.getElementById("cell1").innerText = stat.dataset.zipcode;
document.getElementById("cell2").innerText = stat.dataset["zipcode"];
document.getElementById("cell3").innerText = stat.getAttribute("data-zipCode");
document.getElementById("cell4").innerText = stat.dataset.userName;
document.getElementById("cell5").innerText = stat.dataset["userName"];
document.getElementById("cell6").innerText = stat.getAttribute("data-user-name");
}
</script>
</body>
</html>
源码下载: