element.dataset Redirect 1

« element

The HTMLElement.dataset property allows access, both in reading and writing mode, to all the custom data attributes (data-*) set on the element. It is a map of DOMString, one entry for each custom data attribute.

The name of the custom data attributes must follow the production rule of xml names with the constraints:

  • the name must not start with xml, whatever case is used for these letters;
  • the name must not contain any semicolon (U+003A);
  • the name must not contain capital A to Z letters  spaces.

The custom data attributes is transformed to a key for the DOMStringMap entry with the following rules:

  • any dash (U+002D) is removed;
  • any letter following a dash (U+002D), before its removal, is set in its uppercase counterpart.

This leads to camel-cased keys in the map.

Syntax

string = element.dataset.camelCasedName;
element.dataset.camelCasedName = string;

Examples

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 8 6.0 (6.0) 11 11.10 6
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support --- --- --- --- ---

 

Document Tags and Contributors

Contributors to this page: Sheppy
Last updated by: Sheppy,