How to Get Value of HTML data-* Attribute in JavaScript?

There are two ways you can read value of HTML data-* attributes:

1. Using dataset Property;
2. Using Element.getAttribute().

Using dataset Property

The DOMStringMap interface provides access to data-* attributes via dataset property. When accessing data-* attributes via the dataset property, the value of attributes are read:

1. Without the data- prefix, and;
2. By specifying the name in camel case (instead of dashes).

For example:

<div id="foo" data-total-count="123">foobar</div>

const foo = document.getElementById('foo');
const value = foo.dataset.totalCount;

console.log(value); // '123'

Using Element.getAttribute()

You can simply use the getAttribute() method to get the data attribute values, for example, in the following way:

<div id="foo" data-total-count="123">foobar</div>

const foo = document.getElementById('foo');
const value = foo.getAttribute('data-total-count');

console.log(value); // '123'