Funktionieren benutzerdefinierte HTML5-Datenattribute in IE 6?

173

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?

Paul D. Waite
quelle
117
HTML5 und IE6? Der Horror ... O_o
Vivin Paliath
7
Beachten Sie, dass dies data-geoffaufgrund des Zeichens "-" keine gültige JS-Kennung ist. Sie müssten dataGeoffin Skripten verwenden.
Outis
3
@outis: Nach den Spezifikationen (im Entwurf) meinst du? Ich habe dies selbst in FF 3.6 und Chromium 5.0.307.11 getestet und das Abrufen geoff.dataGeoffhat nicht funktioniert. Es stellte sich heraus ( whatwg.org/specs/web-apps/current-work/multipage/… ), dass es sein sollte geoff.dataset.geoff, aber wie element.datasetes undefinedin modernen Browsern immer noch der Fall ist, wird dies auch nicht unterstützt.
Marcel Korpel
7
Der Jeffth des Jeffth, neunzehn Jeffty-Jeff.
Matt Sach
2
@ANeves: Dies ermöglicht zwar den Zugriff auf eine Eigenschaft mit nicht bezeichnenden Zeichen, gilt hier jedoch nicht, da der Browser ein HTML-Attribut 'data-geoff' nicht mit einer gleichnamigen Eigenschaft im DOM überbrückt.
Outis

Antworten:

153

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.

Marcel Korpel
quelle
4
Dies ist keine tatsächliche Unterstützung für HTML5-Datenattribute. Klingt allerdings nach einer Möglichkeit, sie zu nutzen.
Paul D. Waite
Richtig, dies unterstützt nicht die API von Daten, die Dinge in eine Sammlung einfügen oder was auch immer (niemand unterstützt dies ja). Wie durch get / Set Attribute gezeigt, können Sie Datenattribute jedoch sofort in jedem minimal DOM-fähigen Browser verwenden. Sie könnten wahrscheinlich auch Affen-Patch-Browser verwenden, wenn Sie dazu neigen, die fehlenden Sammlungen zu erstellen. Aus meinen jüngsten Buchexperimenten geht hervor, dass Datenattribute jetzt verwendbar sind und dem derzeit üblichen Schema der Überladung des Klassenattributwerts mit Stilinformationen und zufälligen Metadaten weit überlegen sind.
Thomas Powell
"Sie könnten wahrscheinlich auch Affen-Patch-Browser verwenden, wenn Sie dazu neigen, 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
Ich bin tatsächlich erstaunt, dass diese Antwort immer noch so viel Anerkennung findet, zumal IE 6 laut vielen Webentwicklern als "tot" gelten sollte.
Marcel Korpel
6
@Marcel: Ich denke, einige Websites haben immer noch IE 6 als nicht zu vernachlässigenden Teil ihres Publikums. Vielleicht müssen wir uns in weiteren 10 Jahren keine Sorgen mehr machen.
Paul D. Waite
141

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");
Marko
quelle
2
Diese Antwort scheint ein wenig mit canIuse zu kollidieren. Irgendwelche Eingaben, warum es als "teilweise" unterstützt markiert ist? caniuse.com/dataset
Snekse
8
@Snekse Ich glaube, es hängt mit der Notiz unten zusammenNote: 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.
Marko
@ Marko Was ist <div lala="Tom"></div>, wäre das in IE6 in Ordnung? Wie würden Sie den Wert lesen?
Royi Namir
@ RoyiNamir Ich glaube, es sollte mit jedem Attribut funktionieren, aber Sie überprüfen am besten. Ich habe IE6 nirgendwo zur Hand.
Marko
Ich wünschte, jquery würde einfach weggehen
SuperUberDuper
9

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.

Spudley
quelle
1
"IE6 unterstützt nicht nur die HTML5-Datenattributfunktion nicht, tatsächlich unterstützt sie praktisch kein aktueller Browser" - sicher, obwohl dies von Ihrer Definition von "Unterstützung" abhängt. Kein Browser unterstützt die datasetEigenschaft, aber in allen Browsern können Sie Daten in Attributen mit dem Präfix "speichern" data-und (wie Sie sagen) über abrufen getAttribute. In gewisser Hinsicht unterstützen sie die Funktion, da Sie die Attribute selbst effektiv nutzen können.
Paul D. Waite
Ich sehe Ihren Standpunkt darin, dass es keinen Grund gibt, die datasetImmobilie zu nutzen, um auf sie zuzugreifen - ich weiß nicht, welche Vorteile sie bieten soll getAttribute.
Paul D. Waite
2
@Paul - es bietet keine Vorteile gegenüber getAttribute. Was es bietet, ist eine standardisierte Methode zum Speichern von Daten für ein Tag mithilfe von Attributen. Dies hat immer funktioniert, war aber bis HTML5 nie ein offizieller Standard. HTML5 hat einfach eine vorhandene nicht standardmäßige, aber weit verbreitete Funktion übernommen und ratifiziert, indem einige Regeln hinzugefügt wurden, um festzulegen, wie Sie sie benennen sollen, und eine neue Art des Zugriffs auf sie definiert wurde. Wenn ich sage, dass es nicht unterstützt wird, beziehe ich mich explizit auf die .dataXYZEigenschaften. Wie Sie sagen, wird die grundlegende Funktionalität weitgehend unterstützt, aber nicht, weil es sich um HTML5 handelt.
Spudley
7

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

Timores
quelle
Ah, ja, tut mir leid, ich glaube nicht, dass das der Sinn ist, den ich beabsichtigt habe. Bearbeiten Sie einfach die Frage, um zu klären.
Paul D. Waite
Es tut mir leid, der Link war falsch. Es wurde erklärt, wie dieses Verhalten deaktiviert werden kann, anstatt die Funktion zu erläutern. Ich habe den Link und den Text repariert.
Timores
1
getAttribute funktioniert browserübergreifend, hier müssen Sie sich nicht auf IE-Macken verlassen.
Dummkopf
Ausgezeichnet, vielen Dank. Schöner Artikel auch, ich muss "Willkommen in der ersten DHTML Dude-Kolumne" lieben.
Paul D. Waite
4

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;
}
user1767210
quelle
0

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.

HTML5-Entwickler
quelle
In IE6 funktioniert es (siehe die akzeptierte Antwort ), und ich habe nicht nach jQuery gefragt.
Paul D. Waite
@Paul D. Waite: Entschuldigung, ich habe Ihre Spam-Flagge versehentlich abgelehnt. Das sieht verdächtig aus.
BoltClock
@ BoltClock: Das ist ganz in Ordnung. Der Code-Vorschlag ist eigentlich etwas vernünftig, aber dieser Newsreader-Link hat offensichtlich nichts damit zu tun.
Paul D. Waite
Warum ist es dann noch 4 Jahre später hier?
Dan Pantry