web-dev-qa-db-fra.com

Les attributs de données personnalisés HTML5 fonctionnent-ils dans IE 6?

Attributs de données personnalisés: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

Quand je dis "travail", je veux dire, si j’ai du HTML comme ça:

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

sera le JavaScript suivant:

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

produire, dans IE 6, une alerte contenant “geoff de geoff”?

javascriptinternet-explorerhtml5internet-explorer-6custom-data-attribute
173
Paul D. Waite

Vous pouvez récupérer des valeurs d'attributs personnalisés (ou vos propres) à l'aide de getAttribute. En suivant votre exemple avec

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

Je peux obtenir la valeur de data-geoff en utilisant

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

Voir MSDN . Et bien qu'il soit mentionné ici que vous avez besoin de IE7 pour que cela fonctionne, je l’ai déjà testé avec IE6 et il a fonctionné correctement (même en mode quirks).

Mais cela n'a bien sûr rien à voir avec les attributs spécifiques à HTML5.

153
Marcel Korpel

Oui, ils travaillent.

IE a pris en charge getAttribute() à partir de IE4, ce que jQuery utilise en interne pour data().

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

Vous pouvez donc utiliser la méthode .data() de jQuery ou le code JavaScript à la vanille:

exemple 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");
142
Marko

Non seulement IE6 ne prend pas en charge la fonctionnalité d'attribut de données HTML5, mais en fait aucun navigateur actuel ne les prend en charge! Chrome est la seule exception à l'heure actuelle.

Vous êtes parfaitement libre d'utiliser data-geoff="geoff de geoff" Comme attribut, mais seul Chrome des versions actuelles du navigateur vous donnera la propriété .dataGeoff.

Heureusement, tous les navigateurs actuels, y compris IE6, peuvent faire référence à des attributs inconnus à l'aide de la méthode standard DOM .getAttribute(), donc .getAttribute("data-geoff") fonctionnera partout.

Dans un avenir très proche, les nouvelles versions de Firefox et de Safari commenceront à prendre en charge les attributs de données, mais étant donné qu’il existe un excellent moyen d’accéder à ce dernier et qu’il fonctionne dans tous les navigateurs, il n’ya vraiment aucune raison d’utiliser la méthode HTML5. ne fonctionne que pour certains de vos visiteurs.

Vous pouvez en savoir plus sur l’état actuel de la prise en charge de cette fonction à l’adresse CanIUse.com .

J'espère que ça t'as aidé.

9
Spudley

Je pense que IE a toujours supporté cela (au moins à partir de IE4) et vous pouvez y accéder depuis JS. Ils s'appelaient 'expando properties'. Voir ancien article de MSDN

Ce comportement peut être désactivé en définissant la propriété expando sur false sur un élément DOM (il est vrai par défaut), de sorte que expando les propriétés fonctionnent par défaut).

Edit: corrigé l'URL

7
Timores

Si vous souhaitez récupérer tous les attributs de données personnalisés à la fois, comme la propriété dataset dans les nouveaux navigateurs, vous pouvez procéder comme suit. C'est ce que j'ai fait et fonctionne très bien pour moi dans 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;
}
4
user1767210

Dans IE6 , cela peut ne pas fonctionner. Pour référence: MSDN

Je suggère d'utiliser jQuery pour traiter la plupart des cas:

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

Essayez ceci dans votre codage.

0
HTML5 developer