Do HTML5 custom data attributes “work” in IE 6?

Question

Custom data attributes: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

When I say “work”, I mean, if I’ve got HTML like this:

<div id="geoff" data-geoff="geoff de geoff">

will the following JavaScript:

var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);

produce, in IE 6, an alert with “geoff de geoff” in it?

Answer 1

You can retrieve values of custom (or your own) attributes using getAttribute. Following your example with

<div id="geoff" data-geoff="geoff de geoff">

I can get the value of data-geoff using

var geoff = document.getElementById("geoff");
alert(geoff.getAttribute("data-geoff"));

See MSDN. And although it is mentioned there that you need IE7 to get this to work, I tested this a while ago with IE6 and it functioned correctly (even in quirks mode).

But this has nothing to do with HTML5-specific attributes, of course.

Answer 2

Yes, they work.

IE has supported getAttribute() from IE4 which is what jQuery uses internally for data().

data = elem.getAttribute( "data-" + key ); // Line 1606, jQuery.1.5.2.js

So you can either use jQuery's .data() method or plain vanilla JavaScript:

Sample HTML

<div id="some-data" data-name="Tom"></div>

Javascript

var el = document.getElementById("some-data");
var name = el.getAttribute("data-name");
alert(name);

jQuery

var name = $("#some-data").data("name");

Answer 3

Not only does IE6 not support the HTML5 Data Attribute feature, in fact virtually no current browser supports them! The only exception at the moment is Chrome.

You are perfectly at liberty to use data-geoff="geoff de geoff" as an attribute, but only Chrome of the current browser versions will give you the .dataGeoff property.

Fortunately, all current browsers - including IE6 - can reference unknown attributes using the standard DOM .getAttribute() method, so .getAttribute("data-geoff") will work everywhere.

In the very near future, new versions of Firefox and Safari will start to support the data attributes, but given that there's a perfectly good way of accessessing it that works in all browsers, then there's really no reason to be using the HTML5 method that will only work for some of your visitors.

You can see more about the current state of support for this feature at CanIUse.com.

Hope that helps.

Answer 4

I think IE has always supported this (at least starting from IE4) and you can access them from JS. They were called 'expando properties'. See old MSDN article

This behaviour can be disabled by setting the expando property to false on a DOM element (it's true by default, so the expando properties work by default).

Edit: fixed the URL

Answer 5

If you wanted to retrieve all of the custom data attributes at once like the dataset property in newer browsers, you could do the following. This is what I did and works great for me in ie7+.

function getDataSet(node) {
    var dataset = {};
    var attrs = node.attributes;
    for (var i = 0; i < attrs.length; i++) {
        var attr = attrs.item(i);
        // make sure it is a data attribute
        if(attr.nodeName.match(new RegExp(/^data-/))) {
            // remove the 'data-' from the string 
            dataset[attr.nodeName.replace(new RegExp('^data-'), '')] = attr.nodeValue;
        }
    }
    return dataset;
}

Answer 6

In IE6, it may not work. For reference: MSDN

I suggest using jQuery to handle most of the cases:

var geoff = $("#geoff").data("data-geoff");
alert(geoff);

Try this in your coding.