Access to 'data-' attribute without jQuery

Question

Is it possible to access the data attribute without jQuery?

Easy with jQuery, but I don’t see anywhere else how to do it without jQuery.

If I search on Google "without jQuery," all I get is jQuery examples.

Is it possible?

Answer 1

In here I found this example:

<div id='strawberry-plant' data-fruit='12'></div> <script> // 'Getting' data-attributes using getAttribute var plant = document.getElementById('strawberry-plant'); var fruitCount = plant.getAttribute('data-fruit'); // fruitCount = '12' // 'Setting' data-attributes using setAttribute plant.setAttribute('data-fruit', '7'); // Pesky birds </script> 

So it would look very doable.

Answer 2

You can use the dataset attribute. How in:

 element = document.getElementById("el"); alert(element.dataset.name); // element.dataset.name == data-name 

Answer 3

This is just an attribute ... use getAttribute as with any other attribute: https://developer.mozilla.org/en/docs/DOM/element.getAttribute

Or am I missing the point of your question.

Answer 4

I think you can try the following:

 var ele = document.getElementById("myelement"); if (ele.hasOwnProperty("data")) { alert(ele.data); } 

OR use

 alert(ele['data-property']);