在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>源码下载：
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15