How can I get the values of data attributes in JavaScript code?

Question

I have next html:

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

Is it possible to get the attributes that beginning with data-, and use it in the JavaScript code like code below? For now I get null as result.

document.getElementById("the-span").addEventListener("click", function(){
    var json = JSON.stringify({
        id: parseInt(this.typeId),
        subject: this.datatype,
        points: parseInt(this.points),
        user: "H. Pauwelyn"
    });
});

Kiakiah

In nowadays (2019) it is also possible to use node's dataset property with SVG nodes (!), see answer below or use with D3. – Sturgill

Answer 1

You need to access the dataset property:

document.getElementById("the-span").addEventListener("click", function() {
  var json = JSON.stringify({
    id: parseInt(this.dataset.typeid),
    subject: this.dataset.type,
    points: parseInt(this.dataset.points),
    user: "Luïs"
  });
});

Result:

// json would equal:
{ "id": 123, "subject": "topic", "points": -1, "user": "Luïs" }

Colic

Bear in mind that according to MDN the datasets standard won't work for Internet Explorer < 11. developer.mozilla.org/en-US/docs/Learn/HTML/Howto/… "To support IE 10 and under you need to access data attributes with getAttribute() instead." – Quevedo

any idea how this would work with typescript? since in typescript this gives an error, object maybe undefined – Anetteaneurin

Should be noted that if data parameter is writen in html using kebab-case its still gone be auto casted into camelCase For example if we make <div data-item-id="0"></div> Then we get its by element.dataset.itemId instead of element.dataset.item-id cause "-" is not valid character in property name – Convex

Answer 2

Because the dataset property wasn't supported by Internet Explorer until version 11, you may want to use getAttribute() instead:

document.getElementById("the-span").addEventListener("click", function(){
  console.log(this.getAttribute('data-type'));
});

Dataset documentation

getAttribute documentation

Rosenda

Answer 3

You could also grab the attributes with the getAttribute() method which will return the value of a specific HTML attribute.

const elem = document.getElementById('the-span');

const typeId = elem.getAttribute('data-typeId');
const type   = elem.getAttribute('data-type');
const points = elem.getAttribute('data-points');
const important = elem.getAttribute('data-important');

console.log(`typeId: ${typeId} | type: ${type} | points: ${points} | important: ${important}`
);

<span data-typeId="123" data-type="topic" data-points="-1" data-important="true" id="the-span"></span>

Bine

Answer 4

You can access it as

element.dataset.points

etc. So in this case: this.dataset.points

Vitriform

Answer 5

if you are targeting data attribute in Html element,

document.dataset will not work

you should use

document.querySelector("html").dataset.pbUserId

or

document.getElementsByTagName("html")[0].dataset.pbUserId

Decollate

Answer 6

Modern browsers accepts HTML and SVG DOMnode.dataset

Using pure Javascript's DOM-node dataset property.

It is an old Javascript standard for HTML elements (since Chorme 8 and Firefox 6) but new for SVG (since year 2017 with Chorme 55.x and Firefox 51)... It is not a problem for SVG because in nowadays (2019) the version's usage share is dominated by modern browsers.

The values of dataset's key-values are pure strings, but a good practice is to adopt JSON string format for non-string datatypes, to parse it by JSON.parse().

Using the dataset property in any context

Code snippet to get and set key-value datasets at HTML and SVG contexts.

console.log("-- GET values --")
var x = document.getElementById('html_example').dataset;
console.log("s:", x.s );
for (var i of JSON.parse(x.list)) console.log("list_i:",i)

var y = document.getElementById('g1').dataset;
console.log("s:", y.s );
for (var i of JSON.parse(y.list)) console.log("list_i:",i)

console.log("-- SET values --");
y.s="BYE!"; y.list="null";
console.log( document.getElementById('svg_example').innerHTML )

<p id="html_example" data-list="[1,2,3]" data-s="Hello123">Hello!</p>
<svg id="svg_example">
  <g id="g1" data-list="[4,5,6]" data-s="Hello456 SVG"></g>
</svg>

Sturgill

Answer 7

Circa 2019, using jquery, this can be accessed using $('#DOMId').data('typeId') where $('#DOMId') is the jquery selector for your span element.

Barrio

Answer 8

Example:

<input data-default-value="Default Value">Name</input>

inputEl.getAttribute("data-default-value")

→ returns: Default Value

Deroo

Answer 9

document.getElementById('selectTbl').addEventListener('change', function () {
    $("#selectTbl").val();
    var style = $(this).val() == 1 ? 'block' : 'none';
    document.getElementById('TblAdmin').style.display = style;

    var style = $(this).val() == 2 ? 'block' : 'none';
    document.getElementById('TblMech').style.display = style;

    var style = $(this).val() == 3 ? 'block' : 'none';
    document.getElementById('TblUser').style.display = style;

    var style = $(this).val() == 4 ? 'block' : 'none';
    document.getElementById('TblBiz').style.display = style;
});

Sorry to interrupt I think you already got the answer. Can someone help for me? Here I want to display the div which is TblAdmin, TblMech, TblUser, TblBiz. I'm currently using NiceSelect but inside the select dropdown it has data value attribute. It actually not select but list-item inside unordered-list.

Like picture shown here, https://drive.google.com/file/d/1VyHDMb1Gl4PYBe19XZt1Z8Z-2OLAS1mx/view?usp=sharing

Caterina

it is better to add this as seoarate question so it will be properly answered – Aspia

already but no one answered... https://mcmap.net/q/100981/-get-data-value-from-niceselect-to-display-hidden-div/… – Caterina

Answer 10

Try this instead of your code:

var type=$("#the-span").attr("data-type");
alert(type);

Newport

Asker didn't mention jQuery, this isn't even good jQuery for this purporse. Should be .data('type'); instead. – Headship

And on top of that the suggestion to use this "instead of your code" is far too broad; the Asker would want to keep the event handling set-up, and JSON result, not an alert of the data-type attribute. – Flinger

this is jquery, not pure javascript. – Cat

Answer 11

You can actually use JQuery to accomplish that in a very easy way

$(document).on('click', '.the-span', function(){

let type = $(this).data("type");

});

Overalls

With the explosion of frameworks such as Vue, React and Angular it goes against most of these frameworks practices to use jQuery. If the OP is using one of these then they should actively be avoiding jQuery. Additionally, they asked for it in JavaScript rather than jQuery which is why I've votes this down. – Antiworld