HTML5自定义属性对象Dataset简介
帅的相对论 2013-06-28
一.html5 自定义属性介绍
HTML5中自定义合法属性data-,就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id：
<a href="javascript:" data-id="2312">测试</a>
这里的data-前缀就被称为data属性，其可以通过脚本进行定义，也可以应用CSS属性选择器进行样式设置。数量不受限制，在控制和渲染数据的时候提供了非常强大的控制。
二.Dataset基础
下面是元素应用data属性的一个例子：
<div id="day2-meal-expense" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12 </div>
要想获取某个属性的值，可以像下面这样使用dataset对象：
var expenseday2 = document.getElementById('day2-meal-expense');
var typeOfDrink = expenseday2.dataset.drink;实例：
<html>
<title>test</title>
<body>
<div id="day2-meal-expense"
data-drink="coffee"
data-food="sushi"
data-meal="lunch">￥20.12
</div>
<script type="text/javascript">
window.onload = function() {
var expenseday2 = document.getElementById('day2-meal-expense');
var typeOfDrink;
if(expenseday2.dataset) {
typeOfDrink = expenseday2.dataset.drink;
}else {
typeOfDrink = expenseday2.getAttribute('data-drink');
}
alert("饮料是:" + typeOfDrink);
}
</script>
</body>
</html> 运行结果：
需要注意的是带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如，假设上面的例子中现在有如下data属性，data-meal-time，则我们要获取相应的值可以使用：
expenseday2.dataset.mealTime
data属性基本上所有的浏览器都是支持的，但是dataset对象就属于新贵，目前仅在Opera 11.1+， Chrome 9+下可以通过JavaScript，使用dataset访问你自定义的data属性。至于其他浏览器，好像还不支持。
参考：http://www.cnblogs.com/ATree/archive/2011/08/24/HTML5-Dataset.html
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐，我用的是html5添加网页背景音乐的代码，在此记录一下以后有用。html5方法二：<videocontrols=""autoplay=""name="media&q