js data- code example

Example 1: js get data attribute

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

console.log(dataAttribute);

Example 2: javascript get data-id attribute

//get data-id attribute in plain Javascript
var element = document.getElementById('myDivID');
var dataID = element.getAttribute('data-id');

//get data-id using jQuery
var dataID = $('myDivID').data('data-id');

Example 3: javascript get data attribute value

const article = document.querySelector('#electric-cars');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "cars"

Example 4: accèder data-id javascript

<article
  id="voitureelectrique"
  data-columns="3"
  data-index-number="12314"
  data-parent="voitures">
...
</article>
var article = document.getElementById('voitureelectrique');
 
article.dataset.columns // "3"
article.dataset.indexNumber // "12314"
article.dataset.parent // "voitures"

Example 5: data attribute html

<!-- data-* attritubes can be used on any html element -->
<div data-my-custom-data="true"></div>

Example 6: javascript dataset

//html file
<div id="user" data-user-id="2" data-user-date-of-birth="03/03/1993">
 <p> Hello ! </p>
</div>

//js file
const user = document.getElementById('user')

console.log(user.dataset.userId) // => 2

console.log(user.dataset.userDateOfBirth) // => '03/03/1993'