HTML 中的资料属性data-xxx

用来存储用户在标签上自定义的属性内容，而不去污染标签本身自带的属性。用法规则： data-*

在使用 data-* attribute 時，* 字号的地方不能包含大写字母，也就是属性名称不能包含大写字母，而属性值可以是任何的字串。

<!-- 属性名称为 key -->
<div id="data1" data-key="12px"></div>
<!--  属性名称为 myKey  -->
<div id="data2" data-my-key="123"></div>
<!--  属性名称为 my_key  -->
<div id="data3" data-my_key="123"></div>

用法

1. 原生 JS 用法

// 这是一个DOMStringMap类型的对象
document.getElementById("data1")?.dataset?.key
// 中划线会进行驼峰转换
document.getElementById("data1")?.dataset?.myKey
document.getElementById("data1")?.dataset?.["my_key"]

2. JQuery 中

// 这是一个DOMStringMap类型的对象
$("#data1").data("key")

3. CSS 中也可以使用

#data1 {
  /* 借助于 attr获取元素上的属性 */
  font-size: attr(data-key);
}

/* 属性选择器 */
div[data-key="12px"] {
  font-size: 12px;
}