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 celui-ci:

<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 avec «geoff de geoff»?

Vous pouvez récupérer les valeurs des attributs personnalisés (ou les vôtres) à l'aide de getAttribute. Suivre votre exemple avec

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

Je peux avoir la valeur d' data-geoffutiliser

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

Voir MSDN . Et bien qu'il soit mentionné ici que vous avez besoin d'IE7 pour que cela fonctionne, je l'ai testé il y a un moment avec IE6 et cela fonctionnait correctement (même en mode bizarreries).

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

Oui, ils fonctionnent.

IE a pris en charge getAttribute()depuis IE4, ce que jQuery utilise en interne data().

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

Vous pouvez donc soit utiliser la .data()méthode de jQuery, soit du JavaScript simple:

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

Non seulement IE6 ne prend pas en charge la fonction d'attribut de données HTML5, mais en fait pratiquement aucun navigateur actuel ne les prend en charge! La seule exception pour le moment est Chrome.

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

Heureusement, tous les navigateurs actuels - y compris IE6 - peuvent référencer des attributs inconnus en utilisant la .getAttribute()méthode DOM standard , donc .getAttribute("data-geoff")fonctionnera partout.

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

Vous pouvez en savoir plus sur l'état actuel de la prise en charge de cette fonctionnalité sur CanIUse.com .

J'espère que cela pourra aider.

Je pense que IE a toujours soutenu cela (au moins à partir de IE4) et vous pouvez y accéder à partir de JS. Ils étaient appelés «propriétés expansibles». Voir l' ancien article MSDN

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

Edit: correction de l'URL

Si vous souhaitez récupérer tous les attributs de données personnalisés à la fois, comme la propriété de l'ensemble de données dans les navigateurs plus récents, vous pouvez effectuer les opérations suivantes. 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;
}

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

Je suggère d'utiliser jQuery pour gérer la plupart des cas:

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

Essayez ceci dans votre codage.