使用data-在标签中储存数据

数据属性(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-`自定义属性集合
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容