下面的例子展示了你如何在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
分享到：
相关推荐
AndroidHtml5多属性选择通常指的是利用HTML5的技术在Android应用中实现一个可以允许用户同时选择多个属性或选项的功能。以下是对这一技术的详细讲解： 1. Webview组件：Android中的WebView是一个关键组件，它允许...
在给定的资源中，“非常漂亮的HTML5数据曲线走势图表样式代码”是一个实例，展示了如何使用HTML5来绘制美观且功能丰富的交易曲线图表。这种图表常用于金融、统计和其他需要展示时间序列数据的场景。 首先，HTML5...
在游戏领域，例如分析英雄角色的属性（如生命值、攻击力、防御力等），或在体育数据分析中展示运动员的各项能力指标（如速度、力量、耐力等），雷达图都能提供清晰的比较视角。 在H5中实现雷达图的生成，通常需要...
在HTML5中，表单控件得到了显著增强，提供了更多的属性来帮助开发者创建更加灵活和交互性强的用户界面。以下是基于提供的文件内容所涉及的HTML5表单常用属性的详细说明： 1. **`method`属性**： `method`属性用于...
在HTML5中，input元素不仅新增了多种输入类型，还增加了一些属性，以提供更丰富的功能和更好的用户体验。 1. autocomplete属性： autocomplete属性用于控制表单或输入字段的自动填充功能。当设置为"on"时，浏览器...
在这些源代码中，HTML用于组织数据大屏的布局，包括标题、图表、地图等元素的排列。理解HTML的语法规则，如标签、属性和嵌套结构，对于解析和修改这些页面至关重要。 2. CSS样式设计：CSS（层叠样式表）用于美化...
在HTML中，我们使用`<table>`标签来创建表格，它包含了若干行`<tr>`（表格行），每一行内又包含若干列`<td>`（表格数据单元格）或`<th>`（表头单元格）。在描述中提到的“数据填充处理”，通常涉及到如何有效地展示...
HTML5中的表单控件不仅包括基础的单行文本输入框，还有许多新的特性，如自定义输入类型、数据列表、占位提示以及表单验证等。 首先，单行文本输入框是最常见的表单元素，通过`<input>`标签的`type="text"`属性定义...
微信小程序是一种轻量级的应用开发框架，主要用于在微信内创建...计算属性帮助我们简化模板中的逻辑，而监听器则允许我们在数据变化时执行定制化的操作。熟练掌握这两者，能有效提升微信小程序的开发效率和代码质量。
在商品定制购物网站中，分布式设计能确保高并发访问时网站的稳定性和快速响应，减少单点故障的风险。例如，通过负载均衡器，可以将用户请求分配到多个服务器，避免某个服务器过载；而CDN则能将静态资源（如图片、CSS...
HTML5是一种强大的网页开发语言，它为网页开发者提供了丰富的功能，包括高级图形渲染...通过学习和实践这些文件，你可以更好地理解和掌握如何在HTML5项目中运用ECharts创建饼状图和柱状图，从而提升数据可视化的能力。
在本压缩包“html5饼形数据统计图形代码.zip”中，我们聚焦于HTML5在数据可视化方面的应用，特别是饼形图的实现。饼形图是一种常用的数据表示方式，用于展示各项数据在总数据中的占比。 1. **HTML5 Canvas**: 饼形...
为了方便使用，可以在`<display:table>`标签中加入`id`属性，从而创建一个隐含的对象，后续可以直接使用该对象的属性和方法。 ```jsp 姓名" property="name"/> 年龄" property="age"/> ``` 在上述例子中，每一...
在描述中提到的模板，主要适用于后台统计相关的网站，这意味着它可能包含了一系列专为数据展示、分析和管理定制的组件。 HTML5作为最新版本的超文本标记语言，引入了许多新的特性和功能，以增强网页的交互性和表现...
这些内置的样式属性可以帮助开发者快速地定制数据列表的外观。 然而，Repeater控件则没有直接提供像DataList那样的内置样式属性，如果需要对Repeater进行样式定制，则必须在控件的templates中直接使用标记语言来...
在HTML5中，开发者可以通过Canvas API来绘制平滑的曲线，这在描述销售趋势、股票价格波动或者用户行为分析时非常实用。 此外，代码包可能还提供了对数据的动态更新支持，比如实时数据流的渲染，这样可以为Web应用...
**描述:** `jqGrid` 是一个非常强大且实用的工具，用于在网页上展示表格数据，并提供了一系列的配置选项来定制表格的行为和外观。 **属性详情:** - **重要性**: 高 - **类型**: Object - **默认值**: 默认为空...
在例子中，即使Prop的HTML属性顺序不同，只要父组件传入的属性与子组件声明的Prop匹配，子组件就能正确接收并显示数据。 ```html !"> !"> !"> ``` 在实际应用中，Props不仅可以传递基本类型的数据，如字符串...
对于需要从HTML页面中提取信息的爬虫程序，`html5lib`能处理各种复杂的HTML结构，提高数据提取的准确性。 2. **模板渲染**： 在生成动态HTML模板时，`html5lib`的序列化功能可以确保输出的HTML符合标准。 3. **...
首先，HTML5中的`<canvas>`元素是实现此类动画的关键。`<canvas>`提供了一个二维图形渲染上下文，允许开发者通过JavaScript动态绘制图形。在统计图表中，`<canvas>`可以用来画出条形图、饼图、折线图等各种图表。 ...