What are data attributes?
class lists or
ids. After all, we should aim to keep
id attributes reserved for styling purposes, otherwise, things can get very messy and confusing quickly.
Data attributes in HTML
Identifying data attributes in HTML is pretty easy, just look for anything in the HTML element tags that has
something, in this case, can be anything you want under the sun although it is best practice to name it expressively so that you, and other programmers using your code, can easily tell what type of information is being stored in that data attribute. To create a data attribute in HTML, simply start the property with
data- and pick a name that makes sense for you. You will want to use the assignment operator,
= , to set the data attribute value to a
string. If your data attribute requires two or more words, just add a dash between each word. For example, If I wanted to create a data attribute called “trainer id”, I would write it as
data-trainer-id in the desired HTML element.
In the code below, we can see this very example hardcoded into the HTML. I decided to add data attributes to the different
The data attribute will not appear in your browser so there is no need to worry if our users will see it.
A quick breakdown of what is happening in the code above for more context:
- The function
renderPokemon()is taking in a
dataparameter, which is an array of objects in this case.
- The function is then applying the
.forEach()method to iterate over each object in the
- In each iteration, we are creating an
lielement and populating it with the element’s
speciesattributes, as well as creating a
buttonthat has a data attribute pointing to that element’s
id. In this case, the data attribute is called
**Phew*** ok, back to data attributes…
dataset instead of
data- and we switch to camel case,
thisIsCamelCase, when creating a data attribute with more than one word.
In the code above, we kept it simple and assigned the
trainerDiv element a data attribute of
id. This is done by using dot notation,
.dataset, followed by the desired name for the attribute. If we wanted to use dot notation to create or assign a data attribute with more than one word, say “trainer id”, then it would look like this:
trainerDiv.dataset.trainerId. The result in HTML would look exactly like our first example where we hard coded the data attribute into the element tag.
newLi is added to the DOM, I can search for that node using traditional DOM traversal techniques, such as
Or, if we have the element already in hand, we can check it’s data attributes by using dot notation again!
Don’t worry about
DOMStringMap in the screenshot above, that is just the interface that is used for the HTML.dataset attribute (aka, we get
.dataset from the
Data attributes in CSS
Finally, since data attributes are just plain HTML properties, we can use these data attributes in CSS too. For example, we could target the
li elements that have
data-trainer-id = "8" and
data-trainer-id = "12" to apply style changes depending on the trainer's id.
TLDR; data attributes are a great way to store additional data that does not fit/should not be in either
data-some-name = "value"(use dashes)
element.dataset.someName = "value"(use .dataset and camelCase)
Data attributes can be accessed via dot notation or using DOM traversal techniques such as
element.querySelector('[data-some-name = "value"]')with
valuebeing the actual value you are looking for (e.g., 9, “fluffy”, etc.)
Data attributes can be used by CSS to apply style changes as well.