Element.dataset not supported in IE: Here’s a Workaround

Recently, I was working on a project that used the dataset property to store some additional info about element and I discovered that none of my code worked in IE. After doing some research, I found out that dataset property is not supported by IE (at least not until version 11 comes out). If you’ve ever run into this issue, here’s a quick workaround:

var myElement = document.getElementById('myElement'), // contains attribute data-my-custom-value

if(myElement.dataset !== undefined) { // standard approach
    myCustomValue = myElement.dataset.myCustomValue;
} else {
    myCustomValue = myElement.getAttribute('data-my-custom-value'); // IE approach

In the above example, if the dataset property is undefined, we use the getAttribute method to grab it instead. The one thing to note here is that when you use dataset property to retrieve the value of the my-custom-value attribute, the name of the attribute gets converted to camel-case and the “data” portion of the name is dropped; when you use getAttribute the value is retrieved using the original hyphened value.