search

diveDylan / blog

My blog, detail is in the issues list
2 stars 0 forks source link

data-xxx 属性的作用是什么？ #32

Open diveDylan opened 4 years ago

diveDylan commented 4 years ago

定义

data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

作用

根据mdn中的定义，data-*给开发人员提供了在html元素中写入自定义数据属性的能力，暴露给到JS脚步数据交换的能力， 比如通过data-column改变具有自定义数据column的表现方式

HTMLElement.dataset

js脚步可以通过HTMLElement.dataset来返回节点的自定义数据，值得一提的是它返回的是一个DOMStringMap 中划线的能容会默认转成驼峰

// element
<div data-tiltle-big />
// js
divEl.dataset.titleBig

资料

MDN-data-* MDN-使用自定义数据