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.
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.