Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Nuestros voluntarios aún no han traducido este artículo al Español. Únete a nosotros y ayúdanos a traducirlo

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 a custom data attribute begins with data-. It must contain only letters, numbers and the following characters: dash (-), dot (.), colon (:), underscore (_). Moreover, it should not contain ASCII capital letters (A to Z).

A custom data attribute name is transformed to a key for the DOMStringMap entry with the following rules

  • the prefix data- is removed (including the dash);
  • for any dash (U+002D) followed by an ASCII lowercase letter a to z, the dash is removed and the letter is transformed into its uppercase counterpart;
  • other characters (including other dashes) are left unchanged.

The opposite transformation, that maps a key to an attribute name, uses the following rules:

  • Restriction: A dash must not be immediately followed by an ASCII lowercase letter a to z (before the transformation);
  • a prefix data- is added;
  • any ASCII uppercase letter A to Z is transformed into a dash followed by its lowercase counterpart;
  • other characters are left unchanged.

The restriction in the rules above ensures that the two transformations are the inverse one of the other.

For example, the attribute named data-abc-def corresponds to the key abcDef.

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

Specifications

Specification Status Comment
WHATWG HTML Living Standard
The definition of 'HTMLElement.dataset' in that specification.
Living Standard No change from latest snapshot, HTML5.1
HTML5.1
The definition of 'HTMLElement.dataset' in that specification.
Working Draft Snapshot of WHATWG HTML Living Standard, no change from HTML5
HTML5
The definition of 'HTMLElement.dataset' in that specification.
Recommendation Snapshot of  WHATWG HTML Living Standard, initial definition.

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 (Yes) 6.0 (6) (Yes) (Yes) (Yes)

See also

  • The HTML data-* class of global attributes.

Etiquetas y colaboradores del documento

 Colaboradores en esta página: ondreian, fscholz, teoli, claudepache, yan, kscarfone, pseudosavant, Sheppy, ebidel, ernestd, nimbu
 Última actualización por: ondreian,