data- 属性介绍

新的HTML5标准允许你在普通的元素标签里，嵌入类似data-*的属性，来实现一些简单数据的存取。它的数量不受限制，并且也能由javascript动态修改，也支持CSS选择器进行样式设置。这使得data属性特别灵活，也非常强大。有了这样的属性我们能够更加有序直观的进行数据预设或存储。

HTML5 Dataset 存储的例子

为一个元素分配data属性存储数据，例如这是一个span元素，它的内容是一首音乐的名称，我们为其HTML标签里直接预置这首歌的更多信息，在HTML源码上看起来可以这样来写

<span id="music" class="music"  
data-date="2021-03-30"  
data-author="xxx"  
data-singer="xxx"  
data-title="xxx"  
data-content="you and me">  
what
</span>  

可以用于翻译

<h2 id="multilingual" class="location"  
data-english="Beijing"    
data-korean="북경"  >  
北京
</h2>  

data- 取值和设值

1. 作为HTML元素的标签，dataset的存取也服从getAttribute、setAttribute，而且这两个方法兼容性也最广。

//获取值  

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

console.log(date);  

//设置值  

document.getElementById("multilingual").setAttribute("data-english","Beijing");  

2. 利用 dataset API 存取 dataset 通过.dataset API，我们可以更方便的获取元素的所有data字段，并以对象的方式，方便存取和遍历。

//获取值

var song = document.getElementById("music").dataset;  

var singer= song.singer;  

console.log(singer);  

//设置值

document.getElementById("music").dataset.singer= "xiaoming";  

//添加新的的data-*值  

document.getElementById("music").dataset.location = "xxx";  

3. 如果涉及到连字符”-“，可以采取驼峰化的方法来存取：

<span id="location" data-country-city="Peiking Duck"></span>  
var location = document.getElementById("location").dataset.countryCity;  

jquery 操作data-

window.jQuery && (function($){  

//获取值

var singer= $("#music").data("singer");  

console.log(singer);  

//设置值

$("#music").data("singer","xiaofeifei");  

})(window.jQuery);