wake-up-neo.net

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 eine Warnung mit "geoff de geoff" erstellen?

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

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

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

Ich kann den Wert von data-geoff mit

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

Siehe MSDN . Und obwohl dort erwähnt wird, dass Sie IE7 benötigen, um dies zum Laufen zu bringen, habe ich dies vor einiger Zeit mit IE6 getestet und es funktionierte korrekt (auch im Macken-Modus).

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

153
Marcel Korpel

Ja, sie funktionieren.

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

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

Sie können also entweder die Methode .data() von jQuery oder einfaches Vanilla-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");
142
Marko

IE6 unterstützt nicht nur die HTML5-Datenattribut-Funktion nicht, sondern wird auch von praktisch keinem aktuellen Browser unterstützt! Die einzige Ausnahme ist derzeit Chrome.

Es steht Ihnen frei, data-geoff="geoff de geoff" Als Attribut zu verwenden, aber nur Chrome der aktuellen Browserversionen gibt Ihnen die Eigenschaft .dataGeoff.

Glücklicherweise können alle aktuellen Browser - einschließlich IE6 - unbekannte Attribute mit der Standardmethode DOM .getAttribute() referenzieren, also .getAttribute("data-geoff") wird überall funktionieren.

In naher Zukunft werden neue Versionen von Firefox und Safari beginnen, die Datenattribute zu unterstützen. Da der Zugriff jedoch auf alle Browser einwandfrei funktioniert, gibt es keinen Grund, die entsprechende 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 unter CanIUse.com .

Hoffentlich hilft das.

9
Spudley

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 alter MSDN-Artikel

Dieses Verhalten kann deaktiviert werden, indem expando property für ein DOM-Element auf false gesetzt wird (dies ist standardmäßig der Fall, sodass expando properties standardmäßig funktioniert).

Bearbeiten: Die URL wurde korrigiert

7
Timores

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 für mich in IE7 + 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;
}
4
user1767210

In 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.

0
HTML5 developer