数据属性(data-*)是 HTML5 的一部分,用于在元素上存储自定义数据,方便 JavaScript 访问。
它们以 “data-” 开头,例如 data-id、data-name,适合存储小型信息。
JavaScript 通过 dataset 属性访问这些数据,名称会转换为驼峰式(如 data-my-data 变为 myData)
在 HTML 中的使用
使用数据属性非常简单,只需在 HTML 元素上添加以 “data-” 开头的属性。它们可以应用于任何元素,语法如下:
创建储存目标跳转地址`data-url="${url}`
在 JavaScript 中的操作
JavaScript 提供了 dataset 属性来访问和操作数据属性。这是 HTMLElement 接口的一部分,允许以对象的方式读取和设置数据。需要注意:
数据属性的名称会去除 “data-” 前缀,并将连字符(-)转换为驼峰式命名。
例如,data-my-data 在 dataset 中变为 myData。
`dataset` - 访问该元素的所有`data-`自定义属性集合