86

Can I access a data- attribute without jQuery?

It's easy with jQuery, but I can't see anywhere how to do it without jQuery.

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

Is it even possible?

user2143356
  • 5,467
  • 19
  • 51
  • 95

5 Answers5

137

On 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 appear very doable.

Update: Since Microsoft is now (2020) phasing out the old Internet Explorer engine in favour of a Chromium based Edge, the dataset property is likely to work everywhere. The exception will, for a time, be organizations and corporate networks where IE is still forced. At the time of writing this though - jsPerf still shows the get/setAttribute method as being faster than using dataset, at least on Chrome 81.

fredrik
  • 6,483
  • 3
  • 35
  • 45
  • This seems like the correct approach. Additionally you will probably need to be able to do something like this: document.getElementById('strawberry-plant').setAttribute('data-fruit', 'Some Data Here'); – sage88 Mar 05 '14 at 04:56
  • 2
    Please see tomor's answer below regarding dataset - it is the correct answer unless you have to support deprecated web browsers (IE), which is really unfortunate for you if that's the case... All modern browser versions support HTML5 and ECMAScript 5 (for sure) and 6 almost completely at this point. – Carnix Jun 01 '18 at 12:33
  • Seems more readable than dataset too. Most developers would know what that line of code does at first glace but not so sure you could say the same about dataset – rdans Sep 22 '20 at 15:08
48

You could use the dataset attribute. As in: 

element = document.getElementById("el");
alert(element.dataset.name); // element.dataset.name == data-name
tomor
  • 1,765
  • 2
  • 16
  • 21
  • 3
    Note: While completely correct, this will only work on HTML5-compliant browsers. Using the `getAttribute` method will work on most browsers. – fredrik Apr 09 '13 at 20:59
  • 3
    While not necessarily backwards compatible to deprecated browsers (for example, all version of IE), this is the correct answer. It was certainly forward thinking at the time (2013) but now 5 years on, this is the way it should be done. – Carnix Jun 01 '18 at 12:29
  • Note that the jQuery may return a different type, e.g. data `"0"` will be returned as string by `dataset` however as a number by jQuery – jave.web Aug 20 '22 at 12:32
2

It's 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.

drquicksilver
  • 1,627
  • 9
  • 12
0

You can also use:

getAttribute('data-property');

Which is a bit cleaner and easier to read.

This will get the value of the data attribute.

Hellodan
  • 1,158
  • 4
  • 18
  • 38
-1

I think you can try this:

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

OR use

alert(ele['data-property']);
asim-ishaq
  • 2,190
  • 5
  • 32
  • 55
  • 1
    from the MDN docs , It is ideal to use the getAttribute method since its faster , I quote below : ** Also, the performance of reading data-attributes compared to storing this data in a JS data warehouse is poor. Using dataset is even slower than reading the data out with getAttribute().** - [link](https://developer.mozilla.org/en/docs/Web/Guide/HTML/Using_data_attributes) – Big Zak Oct 16 '16 at 11:20