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?
1
-
1this is old, but it gets you going: html5doctor.com/html5-custom-data-attributesdsdsdsdsd– dsdsdsdsd2013-04-09 20:53:10 +00:00Commented Apr 9, 2013 at 20:53
Add a comment
|
5 Answers
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.
3 Comments
sage88
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');
Carnix
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.
rdans
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
You could use the dataset attribute. As in:
element = document.getElementById("el");
alert(element.dataset.name); // element.dataset.name == data-name
3 Comments
fredrik
Note: While completely correct, this will only work on HTML5-compliant browsers. Using the
getAttribute method will work on most browsers.Carnix
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.
jave.web
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 jQueryIt'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.
Comments
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.
Comments
I think you can try this:
var ele = document.getElementById("myelement");
if (ele.hasOwnProperty("data")) {
alert(ele.data);
}
OR use
alert(ele['data-property']);
1 Comment
Big Zak
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