HTMLElement.dataset 属性允许访问在 HTML 或 DOM 中的元素上设置的所有自定义数据属性(data-*)。
自定义的数据属性名称以 data- 开头的,只可以包含字母(小写),数字和 dash (-), dot (.), colon (:), underscore (_) 字符。
坑点预警:
data-* 中的大写字母会被自动转换成小写字母;
- HTML 中短横线连接的
data-* 属性名,在 js 中需要转换成小驼峰体。
<div id="demo"
data-id="1"
data-user-id="2"
data-customUserId="3"
data-USER="abc"
></div>
var demo = document.getElementById('demo');
console.log(demo.dataset); // DOMStringMap
console.log(demo.dataset.id); // 1
console.log(demo.dataset['user-id']); // undefined
console.log(demo.dataset.userId); // 2
console.log(demo.dataset['custom-user-id']); // undefined
console.log(demo.dataset.customUserId); // undefined
console.log(demo.dataset.USER); // undefined
console.log(demo.dataset.user); // abc
HTMLElement.dataset属性允许访问在 HTML 或 DOM 中的元素上设置的所有自定义数据属性(data-*)。自定义的数据属性名称以
data-开头的,只可以包含字母(小写),数字和 dash (-), dot (.), colon (:), underscore (_) 字符。坑点预警:
data-*中的大写字母会被自动转换成小写字母;data-*属性名,在 js 中需要转换成小驼峰体。