html5自定义属性--------Dataset

<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;

需要注意的是带连字符连接的名称在使用的时候需要命名驼峰化，例如，假设上面的例子中现在有如下data属性，data-meal-time，则我们要获取相应的值可以使用：

expenseday2.dataset.mealTime

dataset属性的优势：当我们要获取多个自定义属性的时候，那么我们按照原来的方式是

var typeOfDrink = document.getElementById('day2-meal-expense').getAttribute('data-drink');

获取多个自定义属性就得把获取getAttribute的语句写在for循环里面去获取，非常麻烦，而使用dataset属性。

expense = document.getElementById('day2-meal-expense').dataset;

dataset并不是典型意义上的JavaScript对象，而是个DOMStringMap对象，DOMStringMap是HTML5一种新的含有多个名-值对的交互变量。

如果你想删掉一个data属性，可以这么做：

delete expenseday2.dataset.meal;

如果你想给元素添加一个属性，可以这么做：

expenseday2.dataset.abcds= 'test';

按时就耗费时间上看dataset是比attrs要长的。但是少量自定义属性是可以忽略这个缺点的。

自定义属性使用场景

我们可以基于data属性值对相应的元素设置CSS样式，例如下面这个例子：

<div class="aa" data-name="111"></div>
<div class="aa" data-name="222"></div>

.aa{width:256px; height:200px;}
.aa[data-name='111']{background:url(test1.jpg) no-repeat;}
.aa[data-name='222']{background:url(test2.jpg) no-repeat;}