Do Custom Data Attributes Work in IE 6?

Custom Data Attributes in IE 6: Dispelling the Myth

Custom data attributes, a key feature of HTML5, enable developers to attach non-visible data to HTML elements for later retrieval or manipulation. However, a common misconception surrounds their compatibility with legacy browsers like Internet Explorer 6.

The Misconception: Data-Attributes Don't Work in IE 6

Many believe that accessing custom data attributes with standard JavaScript methods, such as getAttribute, does not work in IE 6. However, the truth is more nuanced.

The Reality: Custom Attributes Do Work in IE 6

Despite the misconception, it is indeed possible to access custom data attributes using getAttribute in IE 6, even in quirks mode. The following example demonstrates this:

<div>
<pre class="brush:php;toolbar:false">var geoff = document.getElementById('geoff');
alert(geoff.getAttribute("data-geoff"));

In this case, the getAttribute method successfully retrieves the value "geoff de geoff" and displays it in an alert box.

Attribute Specificity

It's important to note that this functionality is not specific to HTML5 attributes. IE 6 supports accessing all custom attributes regardless of their prefix or purpose.

Conclusion

Contrary to popular belief, custom data attributes are not only supported in IE 6, but they can also be accessed using standard JavaScript methods like getAttribute. This dispels the misconception that these attributes are incompatible with legacy browsers, allowing developers to utilize them for data storage and retrieval in a wider range of applications.