Os atributos de dados personalizados do HTML5 “funcionam” no IE 6?

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

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

Será o seguinte JavaScript:

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

produzir, no IE 6, um alerta com “geoff de geoff” nele?

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

 

Posso obter o valor de data-geoff usando

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

Veja o MSDN . E embora seja mencionado que você precisa do IE7 para fazer isso funcionar, eu 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.

Sim, eles funcionam.

O IE suportou 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 método .data() do jQuery ou JavaScript simples:

HTML de amostra

 

Javascript

 var el = document.getElementById("some-data"); var name = el.getAttribute("data-name"); alert(name); 

jQuery

 var name = $("#some-data").data("name"); 

Não apenas o IE6 não suporta o recurso de Atributos de Dados HTML5, na verdade, praticamente nenhum navegador atual os suporta! A única exceção no momento é o Chrome.

Você tem a liberdade de usar data-geoff="geoff de geoff" como um atributo, mas somente o Chrome das versões atuais do navegador fornecerá a propriedade .dataGeoff .

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

Em um futuro muito próximo, novas versões do Firefox e do Safari começarão a suportar os atributos de dados, mas como há uma maneira perfeita de acessá-lo que funciona em todos os navegadores, não há motivo para usar o método HTML5 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.

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 ‘expando propriedades’. Veja o artigo antigo do MSDN

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

Editar: corrigiu o URL

Se você quisesse recuperar todos os atributos de dados personalizados de uma só vez, como a propriedade do dataset em navegadores mais recentes, poderia fazer o seguinte. Isso é 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; } 

No IE6 , pode não funcionar. Para referência: MSDN

Eu sugiro usar o jQuery para lidar com a maioria dos casos:

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

Tente isso na sua codificação.