References

Beginner-friendly references for web development, with live, editable examples.

The JavaScript dataset property

Property JavaScript All modern browsers Updated
Quick answer

The dataset property exposes an element's data-* attributes as an object. el.dataset.userId reads data-user-id, and setting it writes the attribute. Note the kebab-case attribute name becomes camelCase in dataset, and every value is a string.

Overview

HTML lets you attach custom data to any element with data-* attributes — data-id, data-user-name, data-state — and dataset is the clean JavaScript way to read and write them. Instead of getAttribute("data-id"), you write el.dataset.id; instead of setAttribute, you assign el.dataset.id = "42".

Two conversions to remember. The attribute name loses the data- prefix and switches from kebab-case to camelCase: data-user-id becomes dataset.userId. And every value is a string — numbers and booleans come back as strings, so Number(el.dataset.count) or a comparison like el.dataset.active === "true" is how you read them as their real types.

It's the idiomatic way to pass small pieces of data from your HTML (or server-rendered markup) to your JavaScript — an item's ID for a click handler, a config flag, a state value. For larger or structured data, store JSON in a single data-* attribute and JSON.parse() it. Keep data-* for genuine custom data, not for things HTML already has attributes for.

Syntax

// <div data-user-id="42" data-role="admin"></div>

el.dataset.userId    // "42"  (note camelCase, string value)
el.dataset.role      // "admin"
el.dataset.userId = "99"  // sets data-user-id="99"

Example

Live example 
<button id="btn" data-product-id="42" data-price="19.99" style="font:15px system-ui;padding:8px 14px">Add to cart</button>
<p id="out"></p>
<script>
  document.getElementById('btn').addEventListener('click', (e) => {
    const id = e.target.dataset.productId;
    const price = Number(e.target.dataset.price);
    document.getElementById('out').textContent =
      'product ' + id + ' costs $' + price.toFixed(2);
  });
</script>

Best practices

  • Use dataset for custom data; remember data-user-id maps to dataset.userId.
  • Convert values from their string form — Number(el.dataset.count), el.dataset.on === "true".
  • Store structured data as JSON in one attribute and JSON.parse() it.
  • Don't reinvent existing attributes (id, href) as data-*.

Frequently asked questions

How do I read a data attribute in JavaScript?
Use element.dataset.name. For data-user-id, that's element.dataset.userId (camelCase).
Why is my dataset value a string?
All data-* values are stored as strings. Convert with Number() or compare against "true"/"false" for other types.
How does the name conversion work?
Drop the data- prefix and convert kebab-case to camelCase: data-order-total becomes dataset.orderTotal.
What is the difference between dataset and getAttribute?
dataset is a convenient camelCase interface to data-* attributes; getAttribute() reads any attribute by its literal name.
createElement() fetch()