plainJS

Functions / Attributes

Setting, getting, and removing data attributes

jQuery $.data()

2015 page

This is the original page from 2015, kept at its address while the tested rewrite is in progress. The code is of its time: it ran in Internet Explorer and does not use what browsers have gained since. The rewrite replaces it here.

In short

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”:

js
// 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:

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

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

js
el.removeAttribute('data-foo');

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