Ich habe ein Div, das einige Inhalte enthält, die dynamisch hinzugefügt und entfernt werden, sodass sich seine Höhe häufig ändert. Ich habe auch ein Div, das mit Javascript absolut direkt darunter positioniert ist. Wenn ich also nicht erkennen kann, wann sich die Höhe des Div ändert, kann ich das Div darunter nicht neu positionieren.
Wie kann ich also erkennen, wann sich die Höhe dieses Div ändert? Ich gehe davon aus, dass ich ein jQuery-Ereignis verwenden muss, bin mir aber nicht sicher, in welches ich mich einbinden soll.
javascript
jquery
Bob Somers
quelle
quelle
Antworten:
Verwenden Sie einen Größenänderungssensor aus der CSS-Element-Abfrage-Bibliothek:
https://github.com/marcj/css-element-queries
Es verwendet einen ereignisbasierten Ansatz und verschwendet keine CPU-Zeit. Funktioniert in allen Browsern inkl. IE7 +.
quelle
Ich habe vor einiger Zeit ein Plugin für den attrchange- Listener geschrieben, das im Grunde eine Listener-Funktion zur Attributänderung hinzufügt. Obwohl ich es als Plugin sage, ist es tatsächlich eine einfache Funktion, die als jQuery-Plugin geschrieben wurde. Wenn Sie möchten, entfernen Sie den spezifischen Code des Plugins und verwenden Sie die Kernfunktionen.
Hinweis: Dieser Code verwendet keine Abfrage
Schauen Sie sich diese einfache Demo an http://jsfiddle.net/aD49d/
Plugin-Seite: http://meetselva.github.io/attrchange/
Minimierte Version: (1.68kb)
quelle
Sie können das Ereignis DOMSubtreeModified verwenden
Dies wird jedoch auch dann ausgelöst, wenn sich die Abmessungen nicht ändern. Wenn Sie die Position bei jedem Brand neu zuweisen, kann dies zu Leistungseinbußen führen. Nach meiner Erfahrung mit dieser Methode ist die Überprüfung, ob sich die Abmessungen geändert haben, kostengünstiger. Daher sollten Sie möglicherweise eine Kombination aus beiden in Betracht ziehen.
Oder wenn Sie das Div direkt ändern (anstatt das Div durch Benutzereingaben auf unvorhersehbare Weise zu ändern, z. B. wenn es contentEditable ist), können Sie jederzeit ein benutzerdefiniertes Ereignis auslösen.
Nachteil: IE und Opera implementieren dieses Ereignis nicht.
quelle
So habe ich kürzlich dieses Problem behandelt:
Ich weiß, dass ich ein paar Jahre zu spät zur Party komme. Ich denke nur, meine Antwort könnte einigen Leuten in Zukunft helfen, ohne dass ich Plugins herunterladen muss.
quelle
Sie können
MutationObserver
Klasse verwenden.MutationObserver
bietet Entwicklern die Möglichkeit, auf Änderungen in einem DOM zu reagieren. Es ist als Ersatz für Mutationsereignisse konzipiert, die in der DOM3-Ereignisspezifikation definiert sind.Beispiel ( Quelle )
quelle
Es gibt ein jQuery-Plugin, das sehr gut damit umgehen kann
http://www.jqui.net/jquery-projects/jquery-mutate-official/
Hier ist eine Demo davon mit verschiedenen Szenarien, wann sich die Höhe ändert, wenn Sie die Größe des rot umrandeten Div ändern.
http://www.jqui.net/demo/mutate/
quelle
setTimeout
, also wäre es kurz 1 ms + [Zeit, die benötigt wird, um die Überprüfungen durchzuführen], aber die Idee war, ständig zuzuhören, sobald Sie es erneut ausgelöst haben, ist es so eine Schlange. Ich bin sicher, ich könnte es viel besser machen, aber nicht viel Zeit.Als Antwort auf user007:
Wenn sich die Höhe Ihres Elements ändert, weil Elemente mit an das Element angehängt werden
.append()
, sollten Sie die Höhenänderung nicht erkennen müssen. Fügen Sie einfach die Neupositionierung Ihres zweiten Elements in derselben Funktion hinzu, in der Sie den neuen Inhalt an Ihr erstes Element anhängen.Wie in:
Arbeitsbeispiel
quelle
Sie können ein einfaches setInterval erstellen.
BEARBEITEN:
Dies ist ein Beispiel für eine Klasse. Aber Sie können etwas am einfachsten tun.
quelle
Sie können dies verwenden, es werden jedoch nur Firefox und Chrome unterstützt.
quelle
Ziemlich einfach, funktioniert aber:
quelle