通过js/jq控制html5 data-*属性

最近使用到了HTML5 data-*属性，要用到js操作自定义data属性。data详细说明链接

1.利用 getAttribute、setAttribute 存取 dataset

//get

var album = document.getElementById("music-latch").getAttribute("data-album");

//set

document.getElementById("food-pkd").setAttribute("data-en","Beijing Stuffed Duck");

2.利用 dataset API 存取 dataset，这时候我们在访问data时，就不需要"data-"关键词了，直接利用.dataset.name就可以访问到，如果涉及到连字符"-"，可以采取驼峰化的方法来存取

3.利用jquery.attr 方法存取 修改dataset。与jquery.attr运用在其他属性上时的情况完全一样，并且所做出的任何更改，都是可以实时反映到元素data属性上的。

4.利用jquery.data 方法存取 dataset。注意，这个方法只可以用来获取而不能修改，jquery.data对data数据做出的更改，不会反映到HTML元素data属性上!

最后，如果要考虑兼容性，可以考虑利用 getAttribute、setAttribute存取dataset。