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.