custom data attributes html

Hello geeks! In this tutorial I have shared the details about “custom data attributes html”. Okay, let’s move on to the post.

custom data attributes html

var element = document.querySelector('.element');
var dataAttribute = element.getAttribute('data-name');
// replace "data-name" with your data attribute name

console.log(dataAttribute);
<div data-myvar="hello world"</div>
<script>
 //Note: attribute in html will force lowercase, make sure all letters are lower
  var element = document.querySelector("div");
  console.log(element.dataset.myvar);
  //outputs: hello world
</script>
const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Final Words

I hope this article helps you to know about “custom data attributes html”. If you have any queries regarding this tutorial please let us know via the comment section. Share this article with your friends & family via social networks.

Hi, I'm Ranjith a full-time Blogger, YouTuber, Affiliate Marketer, & founder of Coder Diksha. Here, I post about programming to help developers.

Share on:

Leave a Comment