Setting, getting, and removing data attributes

Read, write, or remove data values of an element.

In vanilla JavaScript setting a data attribute of an element is done with the generic setAttribute() method. This is the equivalent of jQuery's $.data() method. Here's an example for setting and retrieving the attribute "data-foo":

// setting data-foo
var el = document.querySelector('div');
el.setAttribute('data-foo', 'Hello World!');

getAttribute() is used for reading the data attribute of an element:

// getting data-foo
var el = document.querySelector('img');

Make use of the removeAttribute() method to delete the given data attribute:


 Apart from setting, getting, and erasing data values, all three methods are also used for manipulating other element attributes.