在HTML5中定做数据属性
日期：2014-05-17 浏览次数：20702 次
在HTML5中定制数据属性
下面的例子展示了你如何在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" onclick="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>
?
源码下载：
using-custom-data-attributes-in-html5.zip
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
