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

javascript get data attribute

Question

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

tendrá el siguiente JavaScript:

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

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

Answer 1

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

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

Editar: corrigió la URL

Answer 2

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

Intenta esto en tu codificación.

Answer 3

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

Usted es perfectamente libre de usar data-geoff="geoff de geoff" como atributo, pero solo Chrome de las versiones actuales del navegador le otorgará la propiedad .dataGeoff .

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

En un futuro muy cercano, las nuevas versiones de Firefox y Safari comenzarán a respaldar los atributos de datos, pero dado que hay una manera perfectamente buena de acceder a él que funcione en todos los navegadores, entonces realmente no hay razón para usar el método HTML5 que lo hará. 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.

Answer 4

Puede recuperar valores de atributos personalizados (o sus propios) usando getAttribute . Siguiendo tu ejemplo con

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

Puedo obtener el valor de data-geoff usando

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

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

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

Answer 5

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;
}

Answer 6

Sí, funcionan

IE ha admitido getAttribute() desde IE4, que es lo que jQuery usa internamente para data() .

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

Así que puedes usar el método .data() jQuery o el JavaScript normal sin formato:

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