Ich habe an einem kleinen Projekt gearbeitet, bei dem ich die Methode jQuery .clone() verwende.
Pechfall mit diesem verwendet es auf HTML, das eindeutige Bezeichner hat.
Also fuhr ich fort, getComputedStyle zu implementieren, um die Stileigenschaften der ursprünglichen eindeutigen Elemente zu finden, um sie in den Klon zu kopieren und danach eine neue ID zu geben (ja, es kann Leistungsprobleme geben, aber es ist experimentell).
Gemäß der jQuery-Spezifikation bewirkt dies nach dem Klonen, aber vor dem Anhängen, dass die Manipulation außerhalb des DOM erfolgt (so dass keine ID-Verletzung auftritt). Aber ich habe merkwürdiges Verhalten in verschiedenen Browsern festgestellt, als ich nach dem Klonen des Objekts nach Stileigenschaften der Elemente suchte. Zuvor geben alle Browser die gleichen Werte zurück, aber nachdem sie geklont wurden:
Firefox - sorglos, und interessanterweise ist der berechnete Stil des Klons der tatsächliche CSS-Wert und nicht die berechneten Daten (in Pixeln).
IE - scheint zu funktionieren, aber der Wert ist nicht unbedingt korrekt.
Chrome - berechnet nicht. Hier ist ein Beispiel:
Weiß jemand, ob das ein Fehler ist oder ein ähnliches Verhalten vorher gesehen wurde? Nicht viel, um online zu gehen (nicht einmal Stackoverflow). Vielen Dank im Voraus für jede Einsicht.
Bearbeiten - hat noch mehr Tests gemacht und es sieht so aus, als ob IE sich genauso verhält wie Chrome.
Nur, anstatt nichts zurückzugeben, wird alles auf "auto" gesetzt.
Wenn auf den Stil der geklonten Objekte mithilfe von .css() zugegriffen wird, geben alle Werte 0px (einschließlich Eigenschaften wie background) zurück.
Scheint nur, dass Mozilla das geklonte Objekt behandelt, als ob irgendein Stil auf ihn angewendet worden wäre.
Erste Annäherung
So habe ich es am Anfang gelöst ... Mozilla anders zu behandeln ist verlockend, aber das würde Browser-Sniffing erfordern, also werden wir daran arbeiten, nicht auf den Stil des Klons zuzugreifen.
Erstellen von zwei Arrays von Objekten mit eindeutigen Bezeichnern - das erste enthält die Elemente, aus denen der Stil kopiert werden soll, und das zweite enthält die geklonten Elemente, an die der Stil übertragen wird:
%Vor%Nun werden die Eigenschaften und ihre Werte aus dem Array von Objekten kopiert, die innerhalb des DOM zu den Klonen gespeichert wurden - danach wird der Name des aktuellen Bezeichners in etwas Einzigartiges geändert:
%Vor%Das geklonte Objekt wird danach eingefügt, sodass keine doppelten Bezeichner mehr vorhanden sind. Beachten Sie, dass dies viele Stileigenschaften hervorbringen kann (ungefähr 220 für jedes Objekt in Firefox zum Beispiel).
%Vor%+++++++++++++++++++++++++++++++++++++++++++++++++++ +++++++++++++++++++++++++++
Zweiter Ansatz
Auch wenn das oben genannte gut funktioniert, ist es nicht sehr effizient und die Werte für die Größenänderung auf der Seite können sich unterscheiden. Also habe ich eine bessere Lösung gefunden, nachdem ich rübergekommen bin und dann etwas in JavaScript's cssRules gegraben habe. Damit können Sie direkt auf alle Stylesheets zugreifen!
Unten ist ein Stift, der versucht, den Prozess zu erklären, aber es kommt darauf an, die eindeutigen Bezeichner im Klon gegen .test zu finden, die im Stylesheet gefunden wurden (mit cssText ). Dann ändern Sie die id und speichern sie in einem Array, damit sie später in das Stylesheet selbst eingefügt / eingefügt wird.
Neben einem effizienteren Ansatz (keine Übertragung aller Standardwerte) wird das tatsächliche CSS für alle Browser anstelle des berechneten Werts kopiert. Und alle Derivate wie img , p und dergleichen können ebenfalls enthalten sein. Es kopiert sogar @rules und hält so die Reaktionsfähigkeit intakt.
Die Essenz davon:
%Vor% Danach kann der Klon in das DOM eingefügt werden, wobei alle eindeutigen Bezeichner und der vollständige Stil angewendet werden. Beachten Sie, dass dies im obigen Beispiel nicht wirklich gemacht wurde, um den Code so lesbar wie möglich zu halten, wenn es darum geht, cssRules zu verwenden. Das Bild wurde zuvor mit einem anderen id in das Markup eingefügt - eines, das den kopierten Stilregeln entspricht.
Tags und Links jquery css clone dom-manipulation getcomputedstyle