<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.mealTimedataset属性的优势：当我们要获取多个自定义属性的时候，那么我们按照原来的方式是
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;}
)
