HTML Custom Data Attributes

Custom html data attributes allow us to expend the available native attributes of DOM elements. Custom data attributes can be used for DOM manipulations, as DOM selectors and more.

HTML

This is how we attach custom data attributes to HTML tags:

<div id="gallery-container" data-columns="3">
   ...
</div>

In our CSS we can use this attribute in 2 ways: as a CSS selector or as a value to the content attribute of a pseudo element (::before or ::after).

Data Attribute as CSS Selector

Using data attributes as CSS selectors is very easy. Simply use it as you would with a native attribute and specify different value options:

#gallery-container {
  max-width: 900px;
  margin: auto;
  padding: 15px;
  display: grid;
  grid-column-gap: 15px;
  grid-row-gap: 15px;
}

#gallery-container[data-columns="3"] {
  grid-template-columns: repeat(3, 1fr);
}

#gallery-container[data-columns="4"] {
  grid-template-columns: repeat(4, 1fr);
}

Data Attribute in Pseudo Elements

In this case you can use a custom data attribute to set the content attribute of a pseudo element with the attr() CSS function.

So, in your html:

<div class="test-div" data-text="Programing is fun"></div>

And in our CSS:

.test-div::after {
  content: attr(data-text);
}

JS

With JS we have 2 main ways of getting and setting custom attributes. The first way is to use the element.getAttribute(attr), element.setAttribute(attr) and element.hasAttribute(attr) functions. The second way is to use the element.dataset property.

The following is how you would get, set and check for attributes the element.getAttribute(attr) way.

Here is our html again:

<div id="gallery-container" data-columns="4">
   ...
</div>

And, JS:

const $galleryContainer = document.getElementById("gallery-container");
// hasAttribute()
console.log($galleryContainer.hasAttribute("data-columns")); // output: true
// getAttribute()
console.log($galleryContainer.getAttribute("data-columns")); // output: 4
// setAttribute()
$galleryContainer.setAttribute("data-columns", 3);
console.log($galleryContainer.getAttribute("data-columns")); // output: 3

And this is how we would do that with element.dataset property:

const $galleryContainer = document.getElementById("gallery-container");
// Get Attribute
console.log($galleryContainer.dataset.columns); // output: 4
// Set Attribute
$galleryContainer.dataset.columns = 3;
console.log($galleryContainer.dataset.columns); // output: 3

A quick note about casing: If your attribute has more than one word in it like: data-test-attribute you will camelCase it like this in your JS.

So, In your HTML:

<div id="gallery-container" data-columns="4" data-test-attribute="1">
   ...
</div>

And In your JS:

const $galleryContainer = document.getElementById("gallery-container");
// Get Attribute
console.log($galleryContainer.dataset.testAttribute); // output: 1
// Set Attribute
$galleryContainer.dataset.testAttribute = 3;
console.log($galleryContainer.dataset.testAttribute); // output: 3

Read more about data attributes here:

👉 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

✍ This post was originally published on my blog, for more posts:
https://yossiabramov.com/