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.
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>
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"
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.
Introduction The influence of words is more significant than ever in a digital age. Whether…
How to Start a Business begins with the realization that every business has its risks and…
It's not uncommon for businesses to have financial difficulties nowadays. The fact of the matter…
The success of any tech innovation depends on its share in various industries and business…
Facing Google penalties can be a daunting challenge for businesses relying on organic search traffic.…
Technology, undeniably, has made our lives easier. But the advent of artificial intelligence has been…