下面的例子展示了你如何在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
分享到：
相关推荐
一个关于html5的技术讲解文档，主要目录如下： 第1章 主要结构 [head] 使用新的html 5结构化元素 使用css样式化html 5 何时使用新的html 5结构化元素 小结 第2章 文本 构造主要内容区域 添加博客...
使用HTML5数据属性和/或JavaScript API轻松配置。 在我们的有关完整的指南和演示示例，请参考CDN < script src =" https://cdn.cocreate.app/attributes/latest/CoCreate-attributes.min.js " > </ script...
简化了该组件配色，为所有图表类型的数据集都增加了color属性，可以直接使用ZUI中的配色名称或者CSS颜色值来指定配色4、新增了一个辅助使用配色的javascript插件，方便在javascript使用ZUI的默认配色5、新增了缩放...
6.2.4 定制有序列表中的列表项序号的数值(value属性) 6.3 使用dir和menu元素来定义列表 6.4 巩固与自测 第7章 建立超链接 7.1 链接的基础知识 7.2 了解文档位置和路径 7.2.1 绝对路径 7.2.2 文档相对路径 7.2.3 区分...
使用HTML5数据属性和/或JavaScript API轻松配置。 在我们的 有关完整的指南和演示示例，请参考 CDN < script src =" https://cdn.cocreate.app/random-color/latest/CoCreate-random-color.min.js " > </...
对用户的消费有个全面的数据记录，对用户的消费能力、消费意向、消费等级进行很好的管理 用户心理属性 心理属性指用户在环境、社会或者交际、感情过程中的心理反应，或者心理活动 目前，用户心理相对会有难度，不用...
目前市场业务中在产品以及其他项目的认证和检测方面存在诸多不便，用户需要实地考察并频繁与检测单位沟通，填写繁琐的纸质检测报告、当面送递样品，对于检测环节中存在的问题难以及时交互并处理。市场上相应的检测...
心理属性指用户在环境、社会或者交际、感情过程中的心理反应，或者心理活动 目前，用户心理相对会有难度，不用过多考虑 怎么做 数据收集 数据太多可以采用抽样的方法 数据建模 根据所获取到的数据建立模型，...
4．2 在servlet中读取表单数据 4．3 示例：读取3个参数 4．4 示例：读取所有参数 4．5 参数缺失或异常时默认值的应用 4．6 过滤字符串中的html特殊字符 4．7 根据请求参数自动填充java对象：表单bean 4．8 当...
1326.5.4 添加一个多字段排序和复合筛选 准则 1326.5.5 使用复合准则 1346.5.6 将筛选保存为查询与筛选的加载 1356.6 定制数据表视图 1366.7 复制、导出和邮寄排序和筛选后的 数据 1386.8 疑难解答 1396.9 现实世界...
1326.5.4 添加一个多字段排序和复合筛选 准则 1326.5.5 使用复合准则 1346.5.6 将筛选保存为查询与筛选的加载 1356.6 定制数据表视图 1366.7 复制、导出和邮寄排序和筛选后的 数据 1386.8 疑难解答 1396.9 现实世界...
1326.5.4 添加一个多字段排序和复合筛选 准则 1326.5.5 使用复合准则 1346.5.6 将筛选保存为查询与筛选的加载 1356.6 定制数据表视图 1366.7 复制、导出和邮寄排序和筛选后的 数据 1386.8 疑难解答 1396.9 现实世界...
1326.5.4 添加一个多字段排序和复合筛选 准则 1326.5.5 使用复合准则 1346.5.6 将筛选保存为查询与筛选的加载 1356.6 定制数据表视图 1366.7 复制、导出和邮寄排序和筛选后的 数据 1386.8 疑难解答 1396.9 现实世界...
1326.5.5 使用复合准则 1346.5.6 将筛选保存为查询与筛选的加载 1356.6 定制数据表视图 1366.7 复制、导出和邮寄排序和筛选后的数据 1386.8 疑难解答 1396.9 现实世界—基于计算机的排序和搜索 139第7章 链接、导入...
1326.5.5 使用复合准则 1346.5.6 将筛选保存为查询与筛选的加载 1356.6 定制数据表视图 1366.7 复制、导出和邮寄排序和筛选后的数据 1386.8 疑难解答 1396.9 现实世界—基于计算机的排序和搜索 139第7章 链接、导入...
1326.5.5 使用复合准则 1346.5.6 将筛选保存为查询与筛选的加载 1356.6 定制数据表视图 1366.7 复制、导出和邮寄排序和筛选后的数据 1386.8 疑难解答 1396.9 现实世界—基于计算机的排序和搜索 139第7章 链接、导入...
导言 除了静态HTML和数据绑定语法,template也可以包含Web...在给编辑和新增界面增加验证控件 和定制数据修改界面 里,我们学习了如何通过添加验证控件, TextBox,DropDownList和其它Web控件来自定义编辑,插入界面.
1326.5.5 使用复合准则 1346.5.6 将筛选保存为查询与筛选的加载 1356.6 定制数据表视图 1366.7 复制、导出和邮寄排序和筛选后的数据 1386.8 疑难解答 1396.9 现实世界—基于计算机的排序和搜索 139第7章 链接、导入...
ZUI是易软天创团队在完善自己产品（禅道、蝉知、然之）过程中形成的一个开源前端HTML5 UI实践方案，帮助你快速构现代跨屏应用。 ZUI前端html5框架 v1.7更新日志 组织结构图： 增加组织结构图视图，轻松绘制多级树...