Propiedad dataset

En el lenguaje HTML está permitido agregar atributos propios a las etiquetas, siempre que comiencen con data-, y luego puede ir cualquier nombre de atributo. Para acceder a dichos atributos mediante JavaScript se utiliza una propiedad especial dataset.

Sintaxis

javascriptelemento.dataset.nombre;

Ejemplo

Leamos el valor del atributo:

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

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

console.log(res);

Resultado de ejecutar el código:

javascript'1000'

Ejemplo

Cambiemos el valor del atributo:

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

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

Como resultado, el código quedará así:

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

Véase también