Os atributos de dados personalizados HTML5 "funcionam" no IE 6?

Question

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

Quando digo "trabalho", quero dizer, se eu tenho HTML assim:

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

Será o seguinte JavaScript:

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

Produza, no IE 6, um alerta com "Geoff de Geoff"?

Answer 1

Você pode recuperar valores de atributos personalizados (ou seus próprios) usando getAttribute. Seguindo o seu exemplo com

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

Eu posso obter o valor de data-geoff usando

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

Ver Msdn. E, embora seja mencionado lá que você precisa do IE7 para que isso funcione, eu testei isso há um tempo atrás com o IE6 e funcionou corretamente (mesmo no modo peculiar).

Mas isso não tem nada a ver com atributos específicos para HTML5, é claro.

Answer 2

Sim, eles funcionam.

O IE apoiou getAttribute() do IE4, que é o que o jQuery usa internamente para data().

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

Então você pode usar o jQuery .data() Método ou JavaScript de baunilha simples:

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

Answer 3

O IE6 não apenas não suporta o recurso de atributo de dados HTML5, de fato, praticamente não O navegador atual os suporta! A única exceção no momento é o Chrome.

Você tem perfeitamente a liberdade de usar data-geoff="geoff de geoff" como um atributo, mas apenas o cromo das versões atuais do navegador lhe dará o .dataGeoff propriedade.

Felizmente, tudo Navegadores atuais - incluindo o IE6 - podem fazer referência a atributos desconhecidos usando o DOM padrão .getAttribute() método, então .getAttribute("data-geoff") vai trabalhar em todos os lugares.

Em um futuro muito próximo, novas versões do Firefox e Safari começarão a apoiar os atributos de dados, mas como há uma maneira perfeitamente boa de acessar que funciona em todos os navegadores, então não há razão para usar o método HTML5 que irá só trabalhe para alguns de seus visitantes.

Você pode ver mais sobre o estado atual de apoio a esse recurso em Caniuuse.com.

Espero que ajude.

Answer 4

Eu acho que o IE sempre apoiou isso (pelo menos a partir do IE4) e você pode acessá -los a partir do JS. Eles foram chamados de 'Propriedades Extensões'. Ver Artigo antigo do MSDN

Este comportamento pode ser desativado definindo o expandão propriedade para false em um elemento DOM (é verdade por padrão, então o expandão propriedades trabalho por padrão).

Editar: Corrigido o URL

Answer 5

Se você quiser recuperar todos os atributos de dados personalizados de uma só vez, como a propriedade DataSet em navegadores mais recentes, poderá fazer o seguinte. Foi isso que eu fiz e funciona muito bem para mim no 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

Dentro Ie6, pode não funcionar. Para referência: Msdn

Sugiro usar o jQuery para lidar com a maioria dos casos:

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

Experimente isso em sua codificação.