标签：
首先是“你必须知道的28个HTML5特征、窍门和技术”里对date属性的分析：
我们现在可以很正式地让所有的HTML元素支持自定义属性。然而，以前，我们可能会这样：
<h1 id=someId customAttribute=value>你好，我是以前的自定义属性<h1>
…校验器会小题大做！但是现在，只要我们以”data”为前缀定义我们的自定义属性，盗版属性立马变成正牌的了。如果你发现你曾经把一个重要的数据附加在诸如class的属性上，可能为了JavaScript之用，那么，本属性将大有帮助啊。
html片段：
<h1 id="newAttr" data-new-attr="my value">我是新时代的帅气自定义属性<h1>
检索自定义属性的值:
var theDiv = document.getElementById(‘newAttr‘); var arr = theDiv.getAttribute(‘data-new-attr‘); alert(arr);//my value
此属性还可以用在CSS中，例如下面这个有些傻里傻气的CSS文字改变的例子：
<style>
.data_custom { display:inline-block; position: relative; }//控制after的定位
.data_custom:hover { color: transparent; }//使原来的文字变透明
.data_custom:hover:after {//光标在上面的时候出现after伪元素
content: attr(data-hover-response);//这里的attr是获取自定义属性的内容，貌似只能在content这里使用
color: black;
position: absolute;
left: 0;
}
</style>
<a class="data_custom" data-hover-response="我说过不要碰我！" href="#">不要碰我，雅蠛蝶~~</a>
这里是效果图
content属性其实是一个非常强大的属性，由于低版本的IE不支持，所以此属性尚未流行，关于content内容生成技术下面是张鑫旭的空间，有相关的详细说明
http://www.zhangxinxu.com/wordpress/2010/04/css-content内容生成技术以及应用/
说完data的属性后，现在可以说dataset了，
下面是元素应用data属性的一个例子：
<div id="day2-meal-expense" data-drink="coffee" data-food="sushi" data-meal="lunch">¥20.12</div>
要想获取某个属性的值，可以像下面这样使用dataset对象：
var expenseday2 = document.getElementById(‘day-meal-expense‘); var typeOfDrink = expenseday2.dataset.drink;
浏览器实现的效果：
需要注意的是带连字符连接的名称在使用的时候需要命名驼峰化，即大小写组合书写，这与应用元素的style对象类似，dom.style.borderColor。例如，假设上面的例子中现在有如下data属性，data-meal-time，则我们要获取相应的值可以使用：
expenseday2.dataset.mealTime
data属性基本上所有的浏览器都是支持的，但是dataset对象就属于新贵，目前仅在Opera 11.1+， Chrome 9+下可以通过JavaScript，使用dataset访问你自定义的data属性。至于其他浏览器，FireFox 6+（未出）以及Safari 6+（未出）会支持dataset对象，至于IE浏览器，目前看来还是遥遥无期的趋势。具体的些兼容性数据，您可以点击这里访问。
html5中data属性，dataset与jquery中的date()
标签：
原文地址：http://www.cnblogs.com/waisonlong/p/4707610.html
