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çã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

Compatibilidade com Browsers

Veja também

• A classe  HTML data-* de atributos globais.