HTMLElement.dataset

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√ß√£o);
  • Um prefixo data- √© adicionado;
  • Qualquer 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

Espeficicação Status Comentário
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

BCD tables only load in the browser

Veja também

  • A classe HTML data-* de atributos globais.