简述data-属性的用法(如何设置，如何获取),有何优势？-Toy模板网

这篇具有很好参考价值的文章主要介绍了简述data-属性的用法(如何设置，如何获取),有何优势？。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

(1)data-定义

data-属性是全局属性，是一类被称为自定义数据属性的属性，它能让我们在所有html元素上嵌入自定义数据属性的能

力，并且通过脚本在HTML和DOM之间实现专有数据交换。

(2)data-用法：

(3)data的获取与设置

HTML

<divclass="box"data-wsl="你好,世界"></div>

方式一

获取:通过JavaScript内置的getAttribute('data属性名') 即可获取.这里的属性名指的是自定义属性名的全称(data-wsl)

let Box = document.querySelector(".box");
console.log(Box.getAttribute("data-wsl"));

设置:通过JavaScript内置的setAttribute('data属性名','新内容')即可设置.这里的属性名指的是自定义属性名的全称(data-

wsl)

Box.setAttribute("data-wsl", "中国,你好");

方式二

获取:通过该数据类型的(dataset) API设置data值来进行获取

console.log(Box.dataset.wsl); //这里的data属性名是指data-后面的名字

设置:通过该数据类型的(dataset) API设置data值来进行设置

Box.dataset.wsl="中国,你好"

(4)data-优势：

个人拙见，敬请斧正文章来源地址https://www.toymoban.com/news/detail-603756.html

到了这里，关于简述data-属性的用法(如何设置，如何获取),有何优势？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

简述data-属性的用法(如何设置，如何获取),有何优势？