Yogesh Chauhan's Blog

How to use data-* Attributes in HTML?

in HTML on March 4, 2021

HTML5 has has this great feature for the data that we want to associate with any element but we don’t need not have any specific meaning between the data and the element. It’s basically like storing a data that is just related to that page or app.

That’s what data-* attributes allow us to do. It stores additional information on HTML elements. It doesn’t requires any special hacks like non-standard attributes, Node.setUserData() or extra properties on DOM.

The data-* attributes allow information to be sent and to be received between the HTML and HTML DOM using JavaScript or any other scripts.

To access it we need to user HTMLElement.dataset property.

You can replace * with any name with the following restrictions:

  • It must not start with xml (it is case-insensitive).
  • It must not have colon characters (:).
  • It must not have capital letters.

The user agent will ignore those custom attributes that starts with “data-“.

We can access the data-name-value will be accessible via HTMLElement.dataset.nameValue (or by HTMLElement.dataset[“nameValue”]).

data-* Attributes Syntax

There is no defined syntax. You can just add the attribute with the name starting with data-.

So, basically the syntax is:



<HTML_element data-*="value">


data-* Attributes Example



<section
  id="articles"
  data-sections="5"
  data-paragraphs="10"
  data-words="1000">
</section>


How to access data-* attributes value using JavaScript?

Printing the values of data-* attributes in JavaScript is straight forward.

We can use either getAttribute() with the full HTML name to get the values or we can just use a dataset property. The DOMStringMap interface is used for the HTMLElement.dataset attribute.

To get the data-* attributes values using the dataset object, we need to use the attribute name after data-.

Let’s get the data from the example above:



const section = document.querySelector('#articles');

section.dataset.sections // "5"
section.dataset.paragraphs // "10"
section.dataset.words // "1000"


How to change data-* attributes value using JavaScript?



const section = document.querySelector('#articles');
section.dataset.sections = 10;
section.dataset.sections // "10"


How to access data-* attributes value using CSS?

It’s just really convenient that we can use CSS to get the values of data-* attributes. That way we don’t need to use JavaScript to change the style on the fly.

We can use attr() function in CSS to get the values.

For e.g.



section::before {
  content: attr(data-parent);
}


How to change style using data-* attributes value in CSS?



section[data-paragraphs='3'] {
  color: blue;
}
section[data-paragraphs='4'] {
  color: red;
}


Source: MDN


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Debugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressHow to define variables in SCSS (Sass)?SCSSWordPress: How to find all posts with a specific custom field value?WordPressHow to create a blurry text effect using CSS?CSSHow to add a Pie Chart in Angular App?AngularHow to add Lifecycle Methods to a Class in React?React