这篇文章主要介绍了HTML5自定义属性前缀
data-及dataset的使用方法(html5 新特性),需要的朋友可以参考下:
HTML5规定可以为元素添加非标准的属性，但要添加前缀 data- ，目的是为元素提供与渲染无关的信息，或者提供语义信息。这些属性可以任意添加、随便命名，只要以 data- 开头即添加了自定义属性之后，可以通过元素的 dataset 属性来访问自定义属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="test" data-data-user="user1" data-name="name1">
</div>
</body>
<script type="text/javascript">
debugger;
var test = document.querySelector("#test")
console.log(test.dataset)//
console.log(test.dataset.dataUser)//user1
conaole.log(test.dataset.name)//name1
</script>
</html>
注意：这里使用驼峰命名。
另外：
在HTML5中，data-*属性会被自动转换为小写。这是因为HTML规范要求所有的属性名都是小写的。
如果你写了一个data-payMent属性，最终取这个字段的时候，你需要使用小写的方式来获取。
以下是一个示例：
<!DOCTYPE html>
<html>
<head>
<title>获取data-payMent属性示例</title>
</head>
<body>
<div data-payMent="这是支付方式"></div>
<script>
// 获取data-payMent属性的值
const div = document.querySelector("div");
const payment = div.dataset.payment;
console.log(payment); // 输出：这是支付方式
</script>
</body>
</html>
在这个例子中，我们在<div>元素上定义了一个data-payMent属性，并将其值设置为"这是支付方式"。然后，使用dataset属性来获取该属性的值时，需要使用小写的方式来访问，即dataset.payment，而不是dataset.payMent。这是因为在HTML中，所有的属性名都会被转换为小写。
参考链接: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset
112
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
