Gli attributi di dati personalizzati HTML5 "funzionano" in IE 6?

Attributi di dati personalizzati: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

Quando dico "lavoro", intendo, se ho HTML in questo modo:

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

sarà il seguente JavaScript:

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

produrre, in IE 6, un avviso con "geoff de geoff" in esso?

Puoi recuperare i valori degli attributi personalizzati (o tuoi) usando getAttribute. Seguendo il tuo esempio con

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

Posso ottenere il valore di data-geoffutilizzo

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

Vedi MSDN . E anche se è stato menzionato lì che hai bisogno di IE7 per farlo funzionare, l'ho provato qualche tempo fa con IE6 e ha funzionato correttamente (anche in modalità strane).

Ma questo non ha nulla a che fare con gli attributi specifici di HTML5, ovviamente.

Sì, funzionano.

IE ha supportato getAttribute()da IE4 che è ciò che jQuery utilizza internamente data().

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

Quindi puoi usare il .data()metodo di jQuery o JavaScript semplice alla vaniglia:

HTML di esempio

<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 solo IE6 non supporta la funzione di attributo dei dati HTML5, in realtà praticamente nessun browser attuale li supporta! L'unica eccezione al momento è Chrome.

Sei perfettamente libero di usare data-geoff="geoff de geoff"come attributo, ma solo Chrome delle versioni correnti del browser ti darà la .dataGeoffproprietà.

Fortunatamente, tutti i browser attuali, incluso IE6, possono fare riferimento ad attributi sconosciuti usando il .getAttribute()metodo DOM standard , quindi .getAttribute("data-geoff")funzioneranno ovunque.

In un futuro molto prossimo, le nuove versioni di Firefox e Safari inizieranno a supportare gli attributi dei dati, ma dato che esiste un modo perfettamente valido di accedervi che funziona in tutti i browser, non c'è davvero alcun motivo per utilizzare il metodo HTML5 che funziona solo per alcuni dei tuoi visitatori.

Puoi vedere di più sullo stato attuale del supporto per questa funzione su CanIUse.com .

Spero che aiuti.

Penso che IE abbia sempre supportato questo (almeno a partire da IE4) e puoi accedervi da JS. Erano chiamati "proprietà expando". Vedi il vecchio articolo MSDN

Questo comportamento può essere disabilitato impostando la proprietà expando su false su un elemento DOM (è vero per impostazione predefinita, quindi le proprietà di expando funzionano per impostazione predefinita).

Modifica: risolto l'URL

Se si desidera recuperare tutti gli attributi di dati personalizzati contemporaneamente come la proprietà del set di dati nei browser più recenti, è possibile effettuare le seguenti operazioni. Questo è quello che ho fatto e funziona benissimo per me in 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;
}

In IE6 , potrebbe non funzionare. Per riferimento: MSDN

Suggerisco di usare jQuery per gestire la maggior parte dei casi:

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

Prova questo nella tua codifica.