JavaScript Set Data Attribute

A lesser-known feature that proves very useful in manipulating HTML elements is the ability to set data attributes. We can store custom data directly in HTML elements by using the ‘data’ attribute. It provide a standardized way to associate metadata with specific elements and give developers the flexibility to store and retrieve information from the DOM (Document Object Model). We can directly set the data through HTML or JavaScript and access it in JavaScript.

How to set data in HTML and access it in JS

We can set the data in all HTML elements. We can store custom data in HTML any name we want but prefix name ‘data-‘ should be used before data names. For example, if we want to store the data called marks, we should use the attribute ‘data-marks’ to store it like (data-marks = “80”). This makes the data easily identifiable. Let’s first see how to set the data in HTML and access it in Javascript.

Example:

//Setting data value
   <div id="student"
   data-name="John"
   data-subject="Physics"
   data-mark="80%">
   …
   </div>

In the example code above, we have created a <div> tag in the HTML and set its idname to “student”. Then we have stored the data of student name using the ‘data-name’ attribute. Similarly, we have given the student’s subject and marks using “data-subject” and “data-mark” attributes.

Note: When setting data in HTML element, you must use the “data-” prefix name for each data set.

JS:

// Retrieving the element
const access = document.querySelector("#student");

// Accessing the data attribute value
document.write(access.dataset.name); //John
document.write(access.dataset.subject); //Physics
document.write(access.dataset.mark); //80%

In the above code, we created constant ‘access’ and use the “document.querySelector()” to retrieve the element by passing the id name “#college”. To access the data value from the element, we need to use the ‘dataset’ property. This property provides a convenient way to access all the data attributes associated with an element. By appending the desired attribute name to the dataset, we can directly access its value like the above code.

How to set and access data in Javascript

JavaScript provides a straightforward way to set data attributes programmatically. By accessing an HTML element’s dataset property, you can assign values to the desired data attribute. The dataset property allows you to interact with all the data attributes associated with an element.

HTML:

<div id="user"> </div>

JS:

// Retrieving the element
const userElement = document.getElementById('user');

//Setting data value
userElement.dataset.userId = 123;
userElement.dataset.name = "Smith"

In this above HTML code, we have created the <div> element and set Id ‘user’ to retrieve the element in Javascript. Then we retrieve that div element using “getElementById()” and stored it in the variable ‘userElement’. Then we assigned a value of ‘123’ to the data attribute “user-id”. Once the data attribute is set, we can be accessed and manipulated using JavaScript like:

// Accessing the data attribute value
document.write(userElement.dataset.userId); // 123
document.write(userElement.dataset.name); //Smith

How to set data in Javascript and display it in CSS

To set value for data in javascript, we need to retrieve the HTML element by id name using “document.getElementById” and set value using the ‘dataset’ property. To display the data values in CSS, we need to use the CSS ‘attr()’ function.

For example:
HTML

<h1 id="myHeading"></h1>

JS

// Retrieving the element
const headingElement = document.getElementById('myHeading');
// Setting the data attribute
headingElement.dataset.info = 'This is a heading element';

CSS

h1::before {
  content: attr(data-info);
}

In this above example, we retrieve the element with the ID “myHeading” and assign a value of “This is a heading element” to the data attribute “info”. Select the HTML element in which you want to display the data value with ‘::before pseudoclass like (h1::before). We can display the data value by giving the name of our data in the attr() function to the CSS ‘content’ property.

You can set the styles to data values like

h1::before {
  content: attr(data-info);
  background: skyblue;
  padding: 10px;
  }

Output:

Conclusion

So, data attribute is a valuable feature that empowers developers to extend the capabilities of their web applications. You can create the data by using the above ways.