Knowledge attributes are also known as data-* attributes, as they’re all the time formatted like that. The phrase knowledge, then a touch -, then different textual content you may make up.
Can you employ the information attribute alone?
What to not do with knowledge attributes
Retailer content material that ought to be accessible. If the content material ought to be seen or learn on a web page, do not solely put them in knowledge attributes, however guarantee that content material is within the HTML content material someplace.
This is extra about hiding issues.
Styling with knowledge attributes
CSS can choose HTML parts primarily based on attributes and their values.
/* Choose any ingredient with this knowledge attribute and worth */
/* You’ll be able to scope it to a component or class or anything */
/* Selects if the attribute is current in any respect */
/* Selects if the attribute has a selected worth */
/* “Begins with” selector, which means this is able to match “three” or something beginning with three, like “three.14″ */
/* “Comprises” which means if the worth has the string wherever inside it */
[data-company*=”google”] The specificity of attribute selectors
It is the very same as a category. We regularly consider specificity as a four-part worth:
inline type, IDs, lessons/attributes, tags
So a single attribute selector alone is
Zero, Zero, 1, Zero. A selector like this:
Zero, Zero, 2, 1. The two is as a result of there’s one class (.card) and one attribute ([data-foo=”bar”]), and the 1 is as a result of there’s one tag (div).
Attribute selectors have much less specificity than an ID, greater than a component/tag, and the identical as a category.
Case-insensitive attribute values
In case you are needing to appropriate for attainable capitalization inconsistencies in your knowledge attributes, the attribute selector has a case-insensitive variant for that.
/* Will match
It is the little i throughout the bracketed selector.
Utilizing knowledge attributes visually
CSS lets you yank out the information attribute worth and show it if you have to.
Instance styling use-case
You might use knowledge attributes to specify what number of columns you desire a grid container to have.
CodePen Embed Fallback
Like every other attribute, you may entry the worth with the generic technique getAttribute.
let worth = el.getAttribute(“data-state”);
// You’ll be able to set the worth as nicely.
// Returns data-state=”collapsed”
However knowledge attributes have their very own particular API as nicely. Say you might have a component with a number of knowledge attributes (which is completely fantastic):
In case you have a reference to that ingredient, you may set and get the attributes like:
span.dataset.data; // 123
span.dataset.index; // 2
span.dataset.prefix = “Mr. “;
span.dataset.emojiIcon = “🎪”;
This API is arguably not fairly as good as classList with the clear add, take away, toggle, and change strategies, however it’s higher than nothing.
You’ve got entry to inline datasets as nicely:
JSON knowledge inside knowledge attributes
Hey, why not? It is only a string and it is attainable to format it as legitimate JSON (thoughts the quotes and such). You’ll be able to yank that knowledge and parse it as wanted.
const el = doc.querySelector(“li”);
let json = el.dataset.particular person;
let knowledge = JSON.parse(json);
console.log(knowledge.identify); // Chris Coyier
A standard one must do with database performance. Say you might have a “Like” button:
That button may have a click on handler on it which performs an Ajax request to the server to increment the variety of likes in a database on click on. It is aware of which document to replace as a result of it will get it from the information attribute.
Chrome Firefox IE Edge Safari 7 6 11 12 5.1 Cellular / Pill
Android Chrome Android Firefox Android iOS Safari 79 68 three 5.Zero-5.1