Funktionieren benutzerdefinierte HTML5-Datenattribute in IE 6?

Lesezeit: 7 Minuten

Funktionieren benutzerdefinierte HTML5 Datenattribute in IE 6
Paul D. Waite

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 dieses 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“ erzeugen?

  • HTML5 und IE6? Der Horror… O_o

    – Vivin Paliath

    9. März 2010 um 22:11 Uhr

  • Beachten Sie, dass data-geoff ist aufgrund des Zeichens „-“ keine gültige JS-Kennung. Sie müssten verwenden dataGeoff in Skripten.

    – aussen

    9. März 2010 um 22:25 Uhr


  • @outis: Laut den Spezifikationen (im Entwurf), meinst du? Ich habe dies selbst in FF 3.6 und Chromium 5.0.307.11 getestet und abgerufen geoff.dataGeoff hat nicht funktioniert. Es stellte sich heraus (whatwg.org/specs/web-apps/current-work/multipage/…) dass es sollte sein geoff.dataset.geoffaber element.dataset ist immer noch undefined In modernen Browsern wird dies nicht unterstützt.

    – Marcel Korpel

    11. März 2010 um 0:24 Uhr

  • Der Jeff vom Jeff, neunzehn Jeffty-Jeff.

    – Matt Sach

    27. Juli 2012 um 16:38 Uhr

  • @ANeves: Während dies den Zugriff auf eine Eigenschaft mit Nicht-Identifikatorzeichen ermöglicht, gilt dies hier nicht, da der Browser ein ‘data-geoff’-HTML-Attribut nicht mit einer gleichnamigen Eigenschaft im DOM überbrückt.

    – aussen

    13. August 2012 um 5:46 Uhr

Sie können Werte von benutzerdefinierten (oder eigenen) Attributen mit abrufen getAttribute. Deinem Beispiel folgend mit

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

Ich kann den Wert von erhalten data-geoff verwenden

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

Sehen 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 hat korrekt funktioniert (sogar im Quirks-Modus).

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

  • Insgesamt ist dies keine tatsächliche Unterstützung von HTML5-Datenattributen. Klingt jedoch nach einer Möglichkeit, sie zu nutzen.

    – Paul D. Waite

    9. März 2010 um 23:05 Uhr

  • Korrigieren Sie, dass dies nicht die API von Daten unterstützt, die Dinge in eine Sammlung oder was auch immer einfügen (niemand unterstützt dies, ja). Wie jedoch durch get/Set Attribute gezeigt wird, können Sie die Hauptverwendung von Datenattributen sofort in jedem minimal DOM-fähigen Browser erhalten. Sie könnten wahrscheinlich auch Patch-Browser affen, wenn Sie so geneigt sind, die fehlenden Sammlungen zu erstellen. Aus meinen jüngsten Buchexperimenten geht hervor, dass Datenattribute jetzt verwendbar sind und dem derzeit üblichen Schema des Überladens des Klassenattributwerts weit überlegen sind, um Stilinformationen und zufällige Metadaten zu enthalten.

    – ThomasPowell

    10. März 2010 um 21:42 Uhr

  • „Sie könnten wahrscheinlich auch Patch-Browser affen, wenn Sie so geneigt sind, die fehlenden Sammlungen zu erstellen.“ — Ja, das ist das Schöne an JavaScript im Vergleich zu CSS: Da es sich um eine Programmiersprache handelt, können Sie Kompatibilitätsprobleme selbst beheben.

    – Paul D. Waite

    10. März 2010 um 22:22 Uhr

  • Ich bin wirklich erstaunt, dass diese Antwort immer noch so viel Anerkennung findet, zumal IE 6 laut vielen Webentwicklern als “tot” gelten sollte.

    – Marcel Korpel

    22. Juli 2011 um 11:13 Uhr

  • @Marcel: Ich denke, einige Websites haben IE 6 immer noch als nicht zu vernachlässigenden Teil ihres Publikums. Vielleicht in Ein weiterer 10 Jahre brauchen wir uns keine Sorgen mehr zu machen.

    – Paul D. Waite

    8. September 2011 um 16:05 Uhr

Funktionieren benutzerdefinierte HTML5 Datenattribute in IE 6
Markus

Ja, sie funktionieren.

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

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

Sie können also entweder jQuery verwenden .data() -Methode oder Plain-Vanilla-JavaScript:

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

  • Diese Antwort scheint ein wenig mit canIuse in Konflikt zu stehen. Irgendwelche Eingaben dazu, warum es als “teilweise” unterstützt markiert ist? caniuse.com/dataset

    – Snekse

    4. Juni 2013 um 19:54 Uhr

  • @Snekse Ich glaube, es hängt mit der Notiz unten zusammen Note: All browsers can already use data-* attributes and access them using getAttribute. "Supported" refers to accessing the values using the dataset property. Current spec only refers to support on HTML elements, only some browsers also have support for SVG/MathML elements.

    – Markus

    4. Juni 2013 um 22:51 Uhr

  • @Marko Was ist mit <div lala="Tom"></div> , wäre das in IE6 ok? Wie würden Sie den Wert ablesen?

    – Royi Namir

    28. Oktober 2015 um 12:46 Uhr


  • @RoyiNamir Ich glaube, es sollte mit jedem Attribut funktionieren, aber Sie überprüfen es am besten. Ich habe IE6 nirgendwo zur Hand.

    – Markus

    28. Oktober 2015 um 21:02 Uhr

  • Ich wünschte, jquery würde einfach verschwinden

    – SuperUberDuper

    11. April 2016 um 12:50 Uhr

IE6 unterstützt nicht nur die HTML5-Datenattributfunktion nicht, sondern virtuell Nein aktuelle Browser unterstützen sie! Die einzige Ausnahme ist im Moment Chrome.

Die Nutzung steht Ihnen vollkommen frei data-geoff="geoff de geoff" als Attribut, aber nur Chrome der aktuellen Browserversionen gibt Ihnen das .dataGeoff Eigentum.

Glücklicherweise, alle Aktuelle Browser – einschließlich IE6 – können mithilfe des Standard-DOM auf unbekannte Attribute verweisen .getAttribute() Methode, also .getAttribute("data-geoff") wird überall funktionieren.

In sehr naher Zukunft werden neue Versionen von Firefox und Safari damit beginnen, die Datenattribute zu unterstützen, aber da es eine absolut gute Möglichkeit gibt, darauf zuzugreifen, die in allen Browsern funktioniert, gibt es wirklich keinen Grund, die HTML5-Methode zu verwenden, die dies tun wird funktionieren nur für einige Ihrer Besucher.

Weitere Informationen zum aktuellen Supportstatus für diese Funktion finden Sie unter CanIUse.com.

Ich hoffe, das hilft.

  • “IE6 unterstützt nicht nur nicht die HTML5-Datenattributfunktion, tatsächlich unterstützt sie praktisch kein aktueller Browser” – sicher, obwohl das von Ihrer Definition von “Unterstützung” abhängt. Kein Browser unterstützt die dataset -Eigenschaft, aber alle Browser erlauben Ihnen, Daten in Attributen mit dem Präfix zu speichern data-und (wie Sie sagen) über abrufen getAttribute. In gewissem Sinne unterstützen sie also das Feature, weil Sie die Attribute selbst effektiv nutzen können.

    – Paul D. Waite

    28. Juni 2011 um 14:24 Uhr

  • Ich verstehe Ihren Standpunkt, dass es keinen Grund gibt, die zu verwenden dataset Eigentum, um darauf zuzugreifen – ich weiß nicht, welche Vorteile es gegenüber bieten soll getAttribute.

    – Paul D. Waite

    28. Juni 2011 um 14:25 Uhr


  • @Paul – es bietet keine Vorteile gegenüber getAttribute. Was es bietet, ist ein standardisierter Weg, um das Speichern von Daten für ein Tag mithilfe von Attributen zu handhaben. Das hat immer funktioniert, war aber bis HTML5 nie ein offizieller Standard. HTML5 nahm einfach eine vorhandene, nicht standardmäßige, aber weit verbreitete Funktion und ratifizierte sie, fügte einige Regeln hinzu, um festzulegen, wie Sie sie benennen sollten, und definierte einen neuen Weg, auf sie zuzugreifen. Wenn ich sage, dass es nicht unterstützt wird, beziehe ich mich ausdrücklich auf die .dataXYZ Eigenschaften; Wie Sie sagen, wird die grundlegende Funktionalität weitgehend unterstützt, aber nicht, weil es sich um HTML5 handelt.

    – Spudley

    28. Juni 2011 um 15:15 Uhr

1646241129 697 Funktionieren benutzerdefinierte HTML5 Datenattribute in IE 6
Timores

Ich denke, IE hat dies immer unterstützt (zumindest ab IE4) und Sie können von JS aus darauf zugreifen. Sie wurden „Expando-Immobilien“ genannt. Sehen alter MSDN-Artikel

Dieses Verhalten kann durch Setzen des Expando deaktiviert werden Eigentum auf false für ein DOM-Element (es ist standardmäßig true, also expando Eigenschaften standardmäßig funktionieren).

Edit: URL korrigiert

Funktionieren benutzerdefinierte HTML5 Datenattribute in IE 6
Benutzer1767210

Wenn Sie alle benutzerdefinierten Datenattribute wie die Dataset-Eigenschaft in neueren Browsern auf einmal abrufen möchten, können Sie Folgendes tun. Dies ist, was ich getan habe und funktioniert großartig für mich 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;
}

1646241129 570 Funktionieren benutzerdefinierte HTML5 Datenattribute in IE 6
Dan

Im IE6, es kann sein, dass es nicht funktioniert. 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.

914320cookie-checkFunktionieren benutzerdefinierte HTML5-Datenattribute in IE 6?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy