HTML Element .dataset Since: HTML5(IE origin → standardized)

// Get the value of a data attribute.
var value = element.dataset.keyName;

// Set the value of a data attribute.
element.dataset.keyName = "value";

// Delete a data attribute.
delete element.dataset.keyName;

<div id="user" data-name="Taro" data-age="25" data-is-active="true">User Info</div>

var user = document.querySelector("#user");

// Get the value of a data attribute. The "data-" prefix is omitted.
console.log(user.dataset.name); // Outputs "Taro"
console.log(user.dataset.age); // Outputs "25"

// Hyphenated attribute names are converted to camelCase.
// "data-is-active" is accessed as "isActive".
console.log(user.dataset.isActive); // Outputs "true"

// Set a data attribute value.
user.dataset.role = "admin";

// Delete a data attribute.
delete user.dataset.age;

element.dataset is a property that provides access to the custom data attributes (data-* attributes) set on an HTML element. The key name is the attribute name with the data- prefix removed. Hyphenated names are converted to camelCase — for example, data-user-id is accessed as dataset.userId.

Values retrieved via element.dataset are always strings. If you need a number, convert the value using Number() or parseInt(). Similarly, boolean-like values such as "true" and "false" are returned as strings, so be careful when comparing them.

Data attributes are an officially sanctioned way to embed custom data in HTML. You can also access them with element.getAttribute(), but element.dataset provides more intuitive object-property-style access and makes reading and writing more concise.