Accessing data-* Attributes with `dataset`
The `dataset` property is a live map of an element's `data-*` attributes. It automatically converts HTML `data-user-id` to `element.dataset.userId` in JS, perfect for storing state. The footgun: name conversion is lossy; HTML attributes are always lowercased.
The `dataset` property provides a direct, object-like interface to an element's custom `data-*` attributes. It simplifies reading and writing metadata by automatically converting HTML's `kebab-case` names (like `data-user-id`) to JavaScript's `camelCase` (`element.dataset.userId`). This is ideal for attaching simple state, like IDs or flags, directly to DOM elements. The main footgun: name conversion is lossy, as all HTML attribute names are lowercased before being processed.
Read the original → developer.mozilla.org
- #javascript
- #dom
- #web-apis
- #html
Get five bites like this every day.
Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.