Does Internet Explorer 6 Support Accessing Custom Data Attributes?

Custom Data Attributes in Internet Explorer 6

Querying custom data attributes in HTML5 is a widely supported feature, but its compatibility with legacy browsers can be uncertain. This article investigates whether Internet Explorer 6 supports accessing data-prefixed attributes like "data-geoff" using JavaScript.

The Problem

In HTML5, custom data attributes allow developers to extend elements with non-standard key-value pairs. For instance, the following code creates a div element with a "data-geoff" attribute:

<div>
<p><strong>The Question</strong></p>
<p>Can JavaScript access the value of "data-geoff" using the following code in Internet Explorer 6?</p>
<pre class="brush:php;toolbar:false">var geoff = document.getElementById('geoff');
alert(geoff.dataGeoff);

The Answer

Contrary to popular belief, Internet Explorer 6 does support retrieving custom attribute values. To do so, use the getAttribute() method, as demonstrated below:

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

In IE6, this code will display "geoff de geoff" in an alert box.

It's important to note that this behavior is not specific to HTML5 attributes. IE6 supports accessing any custom attribute prefixed with "data-".