Funktionieren benutzerdefinierte HTML5-Datenattribute in IE 6?

Benutzerdefinierte Datenattribute: http://dev.w3.org/html5/spec/Overview.html#embedding-custom-non-visible-data

Wenn ich "Arbeit" sage, meine ich, wenn ich HTML wie folgt habe:

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

wird das folgende JavaScript:

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

in IE 6 einen Alarm mit "geoff de geoff" erzeugen?

Sie können Werte von benutzerdefinierten (oder Ihren eigenen) Attributen mit abrufen getAttribute. Folgen Sie Ihrem Beispiel mit

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

Ich kann den Wert der data-geoffVerwendung erhalten

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

Sehen MSDN . Und obwohl dort erwähnt wird, dass Sie IE7 benötigen, damit dies funktioniert, habe ich dies vor einiger Zeit mit IE6 getestet und es hat korrekt funktioniert (auch im Mackenmodus).

Dies hat natürlich nichts mit HTML5-spezifischen Attributen zu tun.

Ja, sie arbeiten.

IE hat getAttribute()von IE4 unterstützt, wofür jQuery intern verwendet data().

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

Sie können also entweder die .data()Methode von jQuery oder einfaches Vanille-JavaScript verwenden:

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

IE6 unterstützt nicht nur die HTML5-Datenattributfunktion nicht, tatsächlich unterstützt sie praktisch kein aktueller Browser! Die einzige Ausnahme im Moment ist Chrome.

Es steht Ihnen völlig frei, data-geoff="geoff de geoff"als Attribut zu verwenden, aber nur Chrome der aktuellen Browserversionen gibt Ihnen die .dataGeoffEigenschaft.

Glücklicherweise können alle aktuellen Browser - einschließlich IE6 - mit der Standard-DOM- .getAttribute()Methode auf unbekannte Attribute verweisen .getAttribute("data-geoff")und funktionieren daher überall.

In naher Zukunft werden neue Versionen von Firefox und Safari die Datenattribute unterstützen. Da es jedoch eine sehr gute Möglichkeit gibt, darauf zuzugreifen, die in allen Browsern funktioniert, gibt es wirklich keinen Grund, die HTML5-Methode zu verwenden Arbeiten Sie nur für einige Ihrer Besucher.

Weitere Informationen zum aktuellen Stand der Unterstützung für diese Funktion finden Sie auf CanIUse.com .

Hoffentlich hilft das.

Ich denke, IE hat dies immer unterstützt (zumindest ab IE4) und Sie können von JS aus darauf zugreifen. Sie wurden "expando properties" genannt. Siehe alten MSDN-Artikel

Dieses Verhalten kann deaktiviert werden, indem die expando- Eigenschaft für ein DOM-Element auf false gesetzt wird (standardmäßig true, daher funktionieren die expando- Eigenschaften standardmäßig).

Bearbeiten: URL korrigiert

Wenn Sie alle benutzerdefinierten Datenattribute wie die Dataset-Eigenschaft in neueren Browsern gleichzeitig abrufen möchten, können Sie Folgendes tun. Dies ist, was ich getan habe und was für mich in ie7 + großartig funktioniert.

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;
}

Im IE6 funktioniert es möglicherweise nicht. Als Referenz: MSDN

Ich schlage vor, jQuery zu verwenden, um die meisten Fälle zu behandeln:

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

Versuchen Sie dies in Ihrer Codierung.