(1)data-定义
data-属性是全局属性，是一类被称为自定义数据属性的属性，它能让我们在所有html元素上嵌入自定义数据属性的能
力，并且通过脚本在HTML和DOM之间实现专有数据交换。
(2)data-用法：
属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
属性值可以是任意字符串
一个元素可以拥有任意数量的data属性
data属性无法储存对象，如需储存，可通过对象序列化
(3)data的获取与设置
HTML
<divclass="box"data-wsl="你好,世界"></div>方式一
获取:通过JavaScript内置的getAttribute('data属性名') 即可获取.这里的属性名指的是 自定义属性名的全称(data-wsl)
JS
let Box = document.querySelector(".box");
console.log(Box.getAttribute("data-wsl"));
设置:通过JavaScript内置的setAttribute('data属性名','新内容')即可设置.这里的属性名指的是 自定义属性名的全称(data-
wsl)
JS
Box.setAttribute("data-wsl", "中国,你好");
方式二
获取:通过该数据类型的(dataset) API设置data值来进行获取
JS
console.log(Box.dataset.wsl); //这里的data属性名是指data-后面的名字
设置:通过该数据类型的(dataset) API设置data值来进行设置
JS
Box.dataset.wsl="中国,你好"
(4)data-优势：
其储存的自定义数据能够被页面的JavaScript利用，可以创建更好的用户体验
可以通过JavaScript来构造数据、填充数据
代码体积小、较为灵活
解决网站的外观和实用性之间产生的冲突文章来源：https://www.toymoban.com/news/detail-603756.html
个人拙见，敬请斧正文章来源地址https://www.toymoban.com/news/detail-603756.html
到了这里，关于简述data-属性的用法(如何设置，如何获取),有何优势？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
