jQuery data attributes

jQuery data attributes allows us to store extra information or return the value at the named data which will be associated with a particular element.

Syntax of data attributes:

This is very simple. On any elements the attribute name starts with a data-* where you can store extra information which does not represent visually.

<div
id="denim"
data-columns="2"
data-category-number="01252"
data-category="garment">
...
</div>

Access with JavaScript:

To get the value using JavaScript is also very simple. So, getting the data attribute though dataset object, you can get the property by part of the attribute name after the data-. Note to remember that the dashes are converted to camelCase here.

Read Also: jQuery’s Data Method

So, using JavaScript we can get as below:

var div_attr = document.getElementById('denim');
div_attr.dataset.columns // "2"
div_attr.dataset.categoryNumber // "01252"
div_attr.dataset.category // "cloth"

Access with CSS:

You can even access data attributes from CSS also.

div::before {
content: attr(data-category);
}

Read more about data attribute from jQuery documentation.