¿Los atributos de datos personalizados HTML5 "funcionan" en IE 6?

Atributos de datos personalizados: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

Cuando digo "trabajo", quiero decir, si tengo HTML como este:

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

será el siguiente JavaScript:

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

producir, en IE 6, una alerta con "geoff de geoff" en el?

Puede recuperar valores de atributos personalizados (o los suyos propios) utilizando getAttribute. Siguiendo tu ejemplo con

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

Puedo obtener el valor de data-geoffusar

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

Ver MSDN . Y aunque se menciona allí que necesita IE7 para que esto funcione, lo probé hace un tiempo con IE6 y funcionó correctamente (incluso en modo peculiar).

Pero esto no tiene nada que ver con los atributos específicos de HTML5, por supuesto.

Si, ellos trabajan.

IE es compatible getAttribute()con IE4, que es para lo que jQuery utiliza internamente data().

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

Entonces puede usar el .data()método de jQuery o JavaScript simple:

HTML de muestra

<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");

IE6 no solo no es compatible con la función de atributo de datos HTML5, sino que prácticamente no navegador actual los admite! La única excepción en este momento es Chrome.

Puede utilizarlo data-geoff="geoff de geoff"como un atributo, pero solo Chrome de las versiones actuales del navegador le dará el.dataGeoff propiedad.

Afortunadamente, todos los navegadores actuales, incluido IE6, pueden hacer referencia a atributos desconocidos utilizando el .getAttribute()método DOM estándar , por lo que.getAttribute("data-geoff") lo que funcionarán en todas partes.

En un futuro muy cercano, las nuevas versiones de Firefox y Safari comenzarán a admitir los atributos de datos, pero dado que hay una forma perfectamente buena de acceder a ella que funciona en todos los navegadores, entonces no hay realmente ninguna razón para usar el método HTML5 que solo funciona para algunos de tus visitantes.

Puede ver más sobre el estado actual de soporte para esta función en CanIUse.com .

Espero que ayude.

Creo que IE siempre ha admitido esto (al menos a partir de IE4) y puede acceder a ellos desde JS. Se llamaron 'propiedades de expansión'. Ver artículo antiguo de MSDN

Este comportamiento se puede deshabilitar estableciendo la propiedad expando en falso en un elemento DOM (es cierto de forma predeterminada, por lo que las propiedades expando funcionan de manera predeterminada).

Editar: reparó la URL

Si desea recuperar todos los atributos de datos personalizados a la vez, como la propiedad del conjunto de datos en los navegadores más nuevos, puede hacer lo siguiente. Esto es lo que hice y funciona muy bien para mí en 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;
}

En IE6 , puede que no funcione. Para referencia: MSDN

Sugiero usar jQuery para manejar la mayoría de los casos:

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

Prueba esto en tu codificación.