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>
content_copy
HTML

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);
}
content_copy
CSS

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>
content_copy
HTML

And in our CSS:

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

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>
content_copy
HTML

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
content_copy
JS

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
content_copy
JS

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>
content_copy
HTML

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
content_copy
JS

Read more about data attributes here:
👉 https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes