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- 取值和设值
- 作为HTML元素的标签,dataset的存取也服从getAttribute、setAttribute,而且这两个方法兼容性也最广。
//获取值
var date= document.getElementById("music").getAttribute("data-date");
console.log(date);
//设置值
document.getElementById("multilingual").setAttribute("data-english","Beijing");
- 利用 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";
- 如果涉及到连字符”-“,可以采取驼峰化的方法来存取:
<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);