Propriedade dataset

Em HTML é permitido adicionar seus próprios atributos aos elementos, desde que comecem com data-, seguido por qualquer nome de atributo. Para acessar esses atributos via JavaScript é usada uma propriedade especial dataset.

Sintaxe

javascriptelemento.dataset.nome;

Exemplo

Vamos ler o valor do atributo:

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
let res = elem.dataset.cost;

console.log(res);

Resultado da execução do código:

javascript'1000'

Exemplo

Vamos alterar o valor do atributo:

html<div data-cost="1000"></div>

javascriptlet elem = document.querySelector('div');
elem.dataset.cost = '2000';

Como resultado, o código ficará assim:

html<div data-cost="2000"></div>

Veja também