Question

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

Quand je dis « travail », je veux dire, si j'ai HTML comme ceci:

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

est le code JavaScript suivant:

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

produits, dans IE 6, une alerte avec « de geoff geoff » en elle?

Était-ce utile?

La solution

Vous pouvez récupérer les valeurs de mesure (ou vos propres) en utilisant les attributs getAttribute. Suite à votre exemple avec

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

Je peux obtenir la valeur de l'aide data-geoff

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

Voir MSDN . Et bien qu'il y est mentionné que vous avez besoin IE7 pour obtenir ce travail, je l'ai testé ce il y a un moment avec IE6 et il a fonctionné correctement (même en mode bizarreries).

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

Autres conseils

Oui, ils travaillent.

IE a soutenu getAttribute() de IE4 qui est ce que jQuery utilise en interne pour data().

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

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

HTML Exemple

<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 prend pas en charge les données HTML5 attribut caractéristique, en fait pratiquement pas navigateur actuel prend en charge les! La seule exception au moment est Chrome.

Vous êtes parfaitement libre d'utiliser data-geoff="geoff de geoff" comme un attribut, mais seulement Chrome des versions du navigateur en cours vous donnera la propriété .dataGeoff.

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

Dans un avenir très proche, les nouvelles versions de Firefox et Safari va commencer à soutenir les attributs de données, mais étant donné qu'il ya une très bonne façon de accessessing il qui fonctionne dans tous les navigateurs, alors il n'y a vraiment aucune raison d'être en utilisant le HTML5 méthode qui ne fonctionne que pour certains de vos visiteurs.

Vous pouvez en savoir plus sur l'état actuel de soutien à cette fonctionnalité CanIUse.com .

L'espoir qui aide.

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

Ce comportement peut être désactivé en réglant le expando propriété false sur un élément DOM (il est vrai par défaut, le expando Propriétés travail par défaut).

Edit: fixe l'URL

Si vous voulez récupérer toutes les données d'attributs personnalisés à la fois comme la propriété de jeu de données dans les navigateurs plus récents, vous pouvez faire ce qui suit. Voilà ce que je l'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;
}

IE6 , il ne fonctionne pas. 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.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top