Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A propriedade HTMLElement.dataset permite o acesso,  em modo de leitura e escrita, a todos os atributos de dados personalizado (data-*) no elemento. Ele é um mapa de DOMString, com uma entrada para cada atributo de dados personalizado.

O nome de um atributo de dados customizado inicia com data-. Ele deve conter somente letras, números e os seguintes caracteres: dash (-),  dot (.), collon (:), underscore (_). Além disso, ele não deve conter letras ASCII captalizadas (A à Z).

Um atributo de dados personalizado é transformado em uma chave para uma entrada no DOMStringMap de acordo com as seguintes regras

  • O prefixo data- é removido (incluindo o dash);
  • Para qualquer dash (U+002D) seguido por uma ASCII letra minúscula (a à z), o dash é removido e a letra que segue é tranformada em maíscula;
  • outros caracteres (incluindo outros dash) são deixados inalterados.

A transformação oposta, que mapeia uma chave para um nome de atributo, usa as seguintes regras:

  • Restrição: um dash pode não ser imediatamente seguido de uma letra ASCII minúscula (a à z)(antes da transformaçãio);
  • Um prefixo data- é adicionado;
  • Qualuer caractere ASCII maiúsculo (A à Z) é transformado em um dash seguido pela sua forma mínúscula;
  • outros caracteres são deixados inalterados.

A restrição nas regras acima garantem que as duas trasnformações são inversa uma da outra.

Por exemplo, o atributo data-abc-def corresponde a chave abcDef.

Sintaxe

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

Exemplos

<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

Especificações

Specification Status Comment
HTML Living Standard
The definition of 'HTMLElement.dataset' in that specification.
Padrão em tempo real Sem mudanças desde o último  snapshot, HTML 5.1
HTML 5.1
The definition of 'HTMLElement.dataset' in that specification.
Recomendação Snapshot de HTML Living Standard, sem mudanças desde HTML5
HTML5
The definition of 'HTMLElement.dataset' in that specification.
Recomendação Snapshot de  HTML Living Standard, definição inicial.

Compatibilidade com Browsers

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 8Edge Full support YesFirefox Full support 6IE Full support 11Opera Full support 11Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 6Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown

Veja também

  • A classe  HTML data-* de atributos globais.

Etiquetas do documento e colaboradores

Colaboradores desta página: Sipmann, emanueloliveira
Última atualização por: Sipmann,