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

173

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

produzir, no IE 6, um alerta com "geoff de geoff"?

Paul D. Waite
fonte
117
HTML5 e IE6? O horror ... O_o
Vivin Paliath
7
Observe que data-geoffnão é um identificador JS válido devido ao caractere "-". Você precisaria usar dataGeoffem scripts.
Outis
3
@outis: De acordo com as especificações (em rascunho), você quer dizer? Eu mesmo testei no FF 3.6 e no Chromium 5.0.307.11 e a recuperação geoff.dataGeoffnão funcionou. Aconteceu ( whatwg.org/specs/web-apps/current-work/multipage/… ) que deveria ser geoff.dataset.geoff, mas como element.datasetainda é undefinednos navegadores modernos, isso não é suportado.
Marcel Korpel
7
O jeffth do jeffth, dezenove jeffty-jeff.
precisa
2
@ANeves: embora isso permita acessar uma propriedade com caracteres não identificadores, ela não se aplica aqui, pois o navegador não une um atributo HTML 'data-geoff' com uma propriedade com o mesmo nome no DOM.
Outis 13/08/12

Respostas:

153

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

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

Eu posso obter o valor de data-geoffusar

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

Veja MSDN . E, embora seja mencionado lá que você precisa do IE7 para fazer isso funcionar, testei isso há algum tempo com o IE6 e ele funcionou corretamente (mesmo no modo quirks).

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

Marcel Korpel
fonte
4
Totalmente, esse não é o suporte real aos atributos de dados HTML5. Parece uma maneira de utilizá-los.
Paul D. Waite
Corrija isso não suporta a API de dados colocando coisas em uma coleção ou o que for (ninguém suporta isso sim). No entanto, como mostrado em get / Set Attribute, você pode obter o uso principal dos atributos de dados imediatamente em qualquer navegador minimamente compatível com DOM. Você provavelmente também pode usar o patch de navegadores se estiver tão inclinado a fazer as coleções ausentes. De minhas experiências recentes em livros, é claro que os atributos de dados são utilizáveis ​​agora e são muito superiores ao esquema comum atual de sobrecarregar o valor do atributo de classe para conter informações de estilo e metadados aleatórios.
Thomas Powell
"Você provavelmente também pode usar o patch de navegadores se estiver tão inclinado a fazer as coleções que faltam." - Sim, isso é o legal do JavaScript em comparação com o CSS: como é uma linguagem de programação, você pode corrigir problemas de compatibilidade.
Paul D. Waite
Na verdade, estou surpreso que essa resposta ainda receba tanto crédito, principalmente porque o IE 6 deve ser considerado "morto", segundo muitos desenvolvedores da web.
Marcel Korpel
6
@Marcel: Eu acho que alguns sites ainda têm o IE 6 como uma parte não negligenciável de seu público. Talvez daqui a dez anos não precisaremos mais nos preocupar.
Paul D. Waite
141

Sim, eles trabalham.

O IE suporta o getAttribute()IE4, que é o que o jQuery usa internamente data().

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

Portanto, você pode usar o .data()método jQuery ou JavaScript simples:

Exemplo 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");
Marko
fonte
2
Esta resposta parece entrar em conflito com o canIuse. Alguma contribuição sobre por que está marcada como "parcialmente" suportada? caniuse.com/dataset
Snekse
8
@Snekse Eu acredito que ele está relacionado com a nota na parte inferiorNote: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.
Marko
@ Marko Que tal <div lala="Tom"></div>, isso seria ok no IE6? Como você leria o valor?
Royi Namir
@RoyiNamir Eu acredito que deve funcionar bem com qualquer atributo, mas é melhor verificar. Não tenho o IE6 à mão em nenhum lugar.
Marko
Desejo jquery seria apenas ir embora
SuperUberDuper
9

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

Você tem toda a liberdade de usá-lo data-geoff="geoff de geoff"como atributo, mas apenas o Chrome das versões atuais do navegador fornecerá a .dataGeoffpropriedade.

Felizmente, todos os navegadores atuais - incluindo o IE6 - podem fazer referência a atributos desconhecidos usando o .getAttribute()método DOM padrão , portanto .getAttribute("data-geoff"), funcionarão em qualquer lugar.

Em um futuro próximo, novas versões do Firefox e Safari começarão a oferecer suporte aos atributos de dados, mas, como há uma maneira perfeitamente boa de acessá-lo que funciona em todos os navegadores, não há realmente nenhuma razão para usar o método HTML5 que só funciona para alguns de seus visitantes.

Você pode ver mais sobre o estado atual de suporte para esse recurso em CanIUse.com .

Espero que ajude.

Spudley
fonte
1
"O IE6 não apenas não suporta o recurso de atributo de dados HTML5, mas praticamente nenhum navegador atual os suporta" - com certeza, embora isso dependa da sua definição de "suporte". Nenhum navegador suporta a datasetpropriedade, mas todos os navegadores permitem armazenar dados em atributos com um prefixo de data-(e como você diz) recuperá-los via getAttribute. Então, em certo sentido, eles suportam o recurso, porque você pode usar os próprios atributos efetivamente.
Paul D. Waite
No datasetentanto, entendo que não há razão para usar a propriedade para acessá-las - não sei quais benefícios ela deve oferecer getAttribute.
Paul D. Waite
2
@Paul - não oferece vantagens sobre o getAttribute. O que ele oferece é uma maneira padronizada de lidar com o armazenamento de dados em uma tag usando atributos. Isso sempre funcionou, mas nunca foi um padrão oficial até o HTML5. O HTML5 simplesmente pegou um recurso existente não padronizado, mas amplamente utilizado, e o ratificou, adicionando algumas regras para dizer como você deve nomeá-los e definindo uma nova maneira de acessá-los. Quando digo que não é suportado, estou me referindo explicitamente às .dataXYZpropriedades; como você diz, a funcionalidade básica é amplamente suportada, mas não porque é HTML5.
Spudley
7

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 expando'. Consulte o artigo antigo do MSDN

Esse comportamento pode ser desabilitado definindo a propriedade expando como false em um elemento DOM (é verdade por padrão, portanto, as propriedades expando funcionam por padrão).

Editar: corrigiu o URL

Timores
fonte
Ah, desculpe, acho que não é esse o sentido que pretendia. Apenas editei a pergunta para esclarecer.
Paul D. Waite
Sinto muito, o link estava errado. Ele explicou como desativar esse comportamento em vez de explicar o recurso. Corrigi o link e o texto.
Timores 9/03/10
1
O getAttribute funciona em vários navegadores, sem a necessidade de confiar nas peculiaridades do IE aqui.
Id #
excelente obrigado Bom artigo também, tenho que amar "Bem-vindo à primeira coluna DHTML Dude".
Paul D. Waite
4

Se você deseja recuperar todos os atributos de dados personalizados de uma só vez, como a propriedade do conjunto de dados em navegadores mais recentes, faça o seguinte. Isto é o 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;
}
user1767210
fonte
0

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

Tente isso em sua codificação.

Desenvolvedor HTML5
fonte
No IE6, ele funciona (veja a resposta aceita ) e não perguntei sobre o jQuery.
Paul D. Waite
@Paul D. Waite: Desculpe, recusei sua sinalização de spam por engano. Isso parece suspeito.
BoltClock
@BoltClock: está tudo bem. A sugestão de código é realmente bastante razoável, mas esse link do leitor de notícias obviamente não tem nenhuma relação.
Paul D. Waite
Então, por que ele ainda está aqui 4 anos depois?
Dan Pantry