Guide to the HTML custom data attributes

Data attribute allows storing/embed an extra bit of information private in HTML elements. The data-* attributes consist of two parts:

  • attribute name: It should not contain uppercase letters, and must be at least one character long after the prefix “data-”
  • attribute value: Value can be of any string.

Data attributes can be useful in many ways. Some of the scenarios where data-attribute could be useful are as below:

  • Add information in the menu icon whether it’s open or closed.
  • Load large-size images in the modal when the image is clicked for preview. We can store the URL of the large size image in the data-attribute.
  • You can store the database ID of the post so that the post can be a query with their custom id.

In order to understand the custom data attribute, we work with an example to create an author data attribute and change the data-attribute when we click the button.

In the HTML, we can define the HTML data-attribute as below:

<div class='author' data-id='44'>
  Taimoor Sattar
</div>

Below, create two (2) button in HTML when click run the javascript function to reveal/change the data-attribute.

<button onclick="revealAuthorID()">
  Click to reveal the author id.
</button>

<button onclick="changeAuthorID()">
  Click me to change author id to 14.
</button>

In CSS, you can style the data attribute as below:

.author[data-id='44'] {
  color: red;
}

.author[data-id='14'] {
  color: blue;
}

In Javascript, you can get/change the HTML Custom Data Attributes (data-*) in two ways.

  • Using generic function e.g. setAttribute and getAttribute
  • Data attributes special API

Below, we have defined two functions revealAuthorID() to alert the author ID and changeAuthorID() to change the author data-attribute.

var author = document.getElementsByClassName("author")[0];

function revealAuthorID(){
  // alert(author.dataset.id);
  alert(author.getAttribute("data-id"));
}

function changeAuthorID(){
  author.setAttribute("data-id", "14");
  // author.dataset.id = 14;
}

Thanks for reading the post.

If you want to learn how to build a full-stack subscription website, please check out my course.

If you find this post useful, please share it on your social platform to reach out to more people.

Share this Blog